[Jeffrey Durette]

I’m looking for a way to click a button and play a short mp3 audio file?
Does anyone have a Java script that can do this?

[support-michael]

Hi Jeffrey,

I assume you do not want the UI to include an audio player, e.g., the audio player widget, yes/no?
Do you need a control stop play as well?

I’m working on an example that demonstrates how to auto-start audio playback in the background. Should be available by tomorrow (Wed).

[Vicky]

here is the code for a button to play mp3. hope this might help.

/**
 * 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 = 'example.mp3';
    isPlaying = false;
   
   buttonId = '#m1-music-play-btn';
   $(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;
}

[Jeffrey Durette]

@support-wayne wrote:

Hi Jeffrey,

I assume you do not want the UI to include an audio player, e.g., the audio player widget, yes/no?
Do you need a control stop play as well?

I’m working on an example that demonstrates how to auto-start audio playback in the background. Should be available by tomorrow (Wed).

Correct I do not want the audio player widget.
And I only want to click the button and only play once. No loop.

[Jeffrey Durette]

@Vicky wrote:

here is the code for a button to play mp3. hope this might help.
I was looking at the code and I might not be reading this right, is it opening a new window or something like thT?
All I wantto do is click a button and have it play an mp3 file.

/**
 * 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 = 'example.mp3';
    isPlaying = false;
   
   buttonId = '#m1-music-play-btn';
   $(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;
}

[Vicky]

Feel free to ask in this forums. i attached the zip file regarding to your querry. this does not work in test centre and shows an error. note that this works only as a native app. so build for an ios or android and download. when u click play it will play in your ios or android device….

Attachments:

You must be logged in to view attached files.

[support-octavio]

Hi Jeffrey,

That code was taken from the Demo – Fake Background Audio.

Please take a look at it, it contains a brief explanation of how it works, so you can understand it better. Also, I just updated it -the external source file that it was using, was moved/removed, so the fastest way to share it with you was including the source file in the project.

[Author]

Posts