Software Archive
Read-only legacy content
17061 Discussions

How to make a soundboard android app with intel xdk ?

lucas_b_
Beginner
640 Views

Hello,

i,ve trying and looking everywhere of how to  make a button that plays a sound when you click it but i failed,i want to make a soundboard app but i can't figure out how to make this happen,can anyone show me how ? share a source code with me how to make a button function is that way , or is there a cordova plug in for this ?

 

i'm really lost and need help !!!!

0 Kudos
10 Replies
Diego_Calp
Valued Contributor I
640 Views

Hi,

Try adding something like this to your button click event:

var audio = new Audio('audio_file.mp3');
audio.play()

Research about the supported format because there are differences in iOS and Android.

Regards

Diego

0 Kudos
lucas_b_
Beginner
640 Views
Diego Calp wrote:

Hi,

Try adding something like this to your button click event:

var audio = new Audio('audio_file.mp3');
audio.play()

Research about the supported format because there are differences in iOS and Android.

Regards

I First, thank you for your suggestion,but i don't think it's that easy on intel xdk, first where should i try that code,is it in button custom script ? Also your code didn't mention the source .I want code source from someone who actually tried it on intel xdk Android app building and it worked for him

Diego

0 Kudos
Diego_Calp
Valued Contributor I
640 Views

Hi,

I made this web app using XDK:

http://www.soledadsacheri.com.ar/app/

The third button in the menu go to a screen with audios.

I used the HTML5 audio tag, which render the play controls. The code I sent you uses the same HTML5 support for audio, so It will work on XDK.

More info here http://stackoverflow.com/questions/9419263/playing-audio-with-javascript

It is really that easy. If it is Javascript and HTML 5 will work on XDK.

Regards

Diego

 

 

 

0 Kudos
lucas_b_
Beginner
640 Views

 YELLOW.PNG

 

Did you use the yellow one in the photo ?

show me some pics from your side or the code and where to put it,because from my side your code didn't work,i have an audio file in www folder with 10 audio mp3 inside and i want 10 different button to play them seperetly one by one,you code saying audio.MP3 intel xdk don't detect them even if i name it like one from my audio list,normally there a source code like www/audio.nameofaudio.mp3 .

 

so i'm waiting from more details from your side with pics,i hope it will work .

0 Kudos
Diego_Calp
Valued Contributor I
640 Views

Yes, I used the audio control you marked.

The code I'm suggesting works perfectly. Try this:

1. Drop a button.

2. In the Interactivity pane at the right in Designer select the button, drop down action and chose Custom script. Then press Edit script.

3. Type the code into the event, like this:

       /* button  Button */
    $(document).on("click", ".uib_w_28", function(evt)
    {
        /* your code goes here */ 
        var audio = new Audio('your_audio.mp3');
        audio.play()
        return false;
    });
    

The mp3 must be placed into www folder.

It not work on Simulate. Open the index.html file of your XDK project in a browser, Chrome for example, and test.

Good luck.

Diego

0 Kudos
lucas_b_
Beginner
640 Views

Thank you for effort to help ,but it still don't work, once i insert your code i can't access to custom script anymore,so the button is not connected to the custom script and won't launch any sound, to be able to access the custom script again i had to delete the app and make a new one or copy the old standard script which was there since the beginning,it's so frustrating really

0 Kudos
Diego_Calp
Valued Contributor I
640 Views

The script for button event goes into the file index_user_scripts.js located at js folder. You can open it from code editor.

If you don't see the Edit Script button, once you attached the button to a custom script you may open it selecting again Custom Script on the drop down.

Regards,

Diego

0 Kudos
lucas_b_
Beginner
640 Views

That's the problem Diego ,once i change the script i can't select it anymore to the button,of couse i can't still access to the script via code working files on the left ,but not from the right where the button menu ,Weird right ? note i also changed your.uib_w_28  to .uib_w_1 because it's a fresh new app and it's the first button , So it's weird right ? did you try to do this in the latest version of intel xdk 2017 ? also did you install a special plugin or something ?

0 Kudos
Diego_Calp
Valued Contributor I
640 Views

I have the latest, version 3759, on OSX.

None plugin, these are basic things in XDK.

Perhaps you need a complete reinstallation to solve the problems.

0 Kudos
Anthony_H_Intel
Employee
640 Views

Hi lucas-

There are several sample apps provided with Intel XDK that play sounds when a button is pressed.
Take a look under HTML5 Companion Hybrid Mobile->Samples and Demos->General.

The Hello, Cordova sample includes two buttons that plays a sound from sound files:

  1. BarkHTML5 plays a sound using HTML5 APIs.
  2. BarkCordova plays a sound using the Cordova Media plugin

Some of the other samples play sounds when a button is pressed also, but Hello, Cordova would be the best place to start.

Tony

 

0 Kudos
Reply