[Uplink1001]

HI.
I have been playing around with making a quick soundboard
my problem is how do I get multiple image buttons on screen to play different sounds.
have looked at the following code, but I can’t get my head around how to add more
image buttons to play more sounds , I can get one to play, how do I add more?????
I need around 16 per page if possible.
http://www.genuitec.com/support-genuitec/download/file.php?id=1733

/**
 * Notification that the UI is about to transition to a new page.
 * Perform custom prepage-transition logic here.
 * @param {String} currentPageId 
 * @param {String} targetPageId 
 * @returns {boolean} true to continue transtion; false to halt transition
 */
phoneui.prePageTransition = function(currentPageId,targetPageId) {
  // add custom pre-transition code here
  // return false to terminate transition
  return true;
}

/**
 * Notification that the UI has transition to a new page.
 * 
 * @param {String} newPageId 
 */
phoneui.postPageTransition = function(newPageId) {
  
}

/**
 * Notification that device orientation has changed. 
 * 
 * @param {String} newOrientation 
 */
phoneui.postOrientationChange = function(newOrientation) {
  
}

//-----------------------------------------------------------
  
/**
 * Called when document is loaded.
 */
phoneui.documentReadyHandler = function() {
  initAudio();
}

//create a hidden <audio> element to play the src mp3 file;
//configure button click handler to toggle play on/off
function initAudio() {
   audio = new Audio();
   audio.src = 'audio/police_radio.mp3';
   
   isPlaying = false;
   
   buttonId = '#m1-custom-audio-demo-Playstopbutton2';
   $(buttonId).click(toggleAudio);

   //stop audio when changing browser page or click home btn
   $(window).bind('pagehide',stopAudio); 
}


function toggleAudio() {
  if (isPlaying) { 
    stopAudio();
  } else {
    playAudio();
  }
}
  
//start playing, update button label to STOP
function playAudio() {
  if (!audio || isPlaying) return;
    
  $(buttonId).text('Stop');
   audio.play();
   isPlaying = true;
}

//start playing, update button label to PLAY
function stopAudio() {
  if (!audio || !isPlaying) return;

  $(buttonId).text('Play');
  audio.pause();
  isPlaying = false;
}
/**
 * Notification that the page's HTML/CSS/JS is about to be loaded.
 * Perform custom logic here, f.e. you can cancel request to the server.
 * @param {String} targetScreenId 
 * @returns {boolean} true to continue loading; false to halt loading
 */
phoneui.prePageLoad = function(targetScreenId) {
  // add custom pre-load code here
  // return false to terminate page loading, this cancels transition to page as well
  return true;
}

This was in a previous post but there were no answers to the question about adding more buttons to play sound.
thanks
uplink1001

[Brandon]

I would modify the action to set the audio file based on the button that fired the event.

For example: (untested off the top of my head)

If (event.target.id == ‘PlayButton1’)
{
audio.src = ‘audio/PlayButton1.mp3’;
}
If (event.target.id == ‘PlayButton2’)
{
audio.src = ‘audio/PlayButton2.mp3’;
}
//etc…

You can make sure you get the correct syntax for the button id using:

alert(event.target.id); //this will give you the ID of the element that fired the event

After thought, you might be able to use the element ID as the sound file then just use:
audio.src = ‘audio/’ + event.target.id + ‘.mp3’;

[Code_A]

I have not messed with audio, but looking at the code I would think you could switch between audio files by passing a parameter to the initAudio() function.

Give something like this a try:

in your On Action JavaScript call for your button, you would include the parameter:

initAudio("police_radio.mp3")

function initAudio(file) {
   audio = new Audio();
   audio.src = 'audio/' + file;
....
}

[Author]

Posts