[Uplink1001]

Hi.
Seem to be getting nowhere with this at the minute.
Can anyone help?
Problem: I want to be able to have more than one image button on screen to play sound when touched.
(have attached zip with demo of 2image buttons to play sounds when touched) but have a problem.
1: if either of the buttons in touched once nothing happens you have to touch each twice quickly for any sound to play, what I need it for them to be only touched once
I may be missing something in the audiotest_custom.js is there something I should remove for this to happen? (included the audiotest_custom.js)
or should I be adding something extra?.
2: I have tried this using a hidden audio widget, but there is lag and it’s not really what I want.
Anyone have any idea’s??
Using Mobion 2.6, installing on iPhone4 running Ios7

It works just the way I want when you run it in the Mobile Web Simulator, but on iOS device all the above happens?

/**
 * 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 initAudio1() {
   audio = new Audio();
   audio.src = 'media/B17.mp3';
   
   isPlaying = false;
   
   buttonId = '#m1-audiotest-Button1';
   $(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('');
   audio.play();
   isPlaying = true;
}

/**
 * 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;
}

/**
 * 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) {
  
}


//create a hidden <audio> element to play the src mp3 file;
//configure button click handler to toggle play on/off
function initAudio2() {
   audio = new Audio();
   audio.src = 'media/Spitfire1.mp3';
   
   isPlaying = false;
   
   buttonId = '#m1-audiotest-Button2';
   $(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('');
       audio.play();
       isPlaying = true;
}

/**
 * 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;
}

Attachments:

You must be logged in to view attached files.

[support-octavio]

Hi Uplink1001,

You should stop using the html5 audio component and use the audio widget api. The example (and I think it’s the one you’re following) that uses <audio> tag has been marked as obsolete. Switch to this audio api: http://www.genuitec.com/mobile/docs/audioWidgetAPI/audioWidgetAPI.html

[Uplink1001]

Hi.
Seems i have been wasting my time then!!
Do you have an example of code that uses 2 buttons on screen to play sound, i do want to have around 8 in total on each screen.
My head is a mess at the minute, can’t seem to get anything to work……..:-(
just an example of a Custom.js file??
Have looked at the audio audio.api, sorry can’t seem to make anything of it yet, too much time in front of this computer, need coffee and a kip.

Uplink1001

[Brandon]

Place a audio widget on your form.
Place a button on your form.
In the buttons run javascript place this:

var audioWidget1 = AudioPlayerWidget.fromWidget('m1-formname-audio1-container');//change formname to your form
audioWidget1.setMedia('yourfile.mp3');//change to your audio file
audioWidget1.play();

Repeat for each button.

Note: audioWidget1.stop(); //this will stop any audio playing

[Uplink1001]

Hi. CincyPlanet

Thanks for that, have not tried it yet, hope it works.
Will get back with results…

Thanks again
Uplink1001

[Brandon]

It should I use it in a app that is in the app store with over 4000 downloads between all the sources.

[Uplink1001]

Hi.
What is your app called? I will have a look at it on the app store.

Thanks again.

[Uplink1001]

Hi.
CincyPlanet
Have used the code you suggested and that seems to work fine.
Just one question.
added 2 buttons to screen pressed the first and works fine, plays the selected audio.
press the second and the first audio stops, as i expected. i then have to press the second audio button again for the sound to play.
is there a way to get the second button to start playing the audio straight away?
attached the sample file.

Thanks for your help.
Uplink1001

Attachments:

You must be logged in to view attached files.

[Brandon]

Try using the stop command first then the rest of the code and see if that works.

The app is My Santa Connection I just tested it and it does te same thing though not an issue for my app.

[Uplink1001]

Hi.
Tried what you said
>Try using the stop command first then the rest of the code and see if that works.
This does not work/
any more ideas?

Uplink1001

[Brandon]

Try this it works in your sample.

Attachments:

You must be logged in to view attached files.

[Uplink1001]

HI.
sorry i’m at a loss here??
// then just use Cordova Media API:
Don’t know where to start??

Sorry
Uplink1001

[Brandon]

You should be able to just drop this in the same files as the zip and go, for the sample you dont need to do anything else.

// then just use Cordova Media API:

Is just a comment in the code, it already uses the API

[Uplink1001]

HI. CindyPlanet
Sorry, but i don’t seem to be able to get this to work.
would it be possible for you to drop this into my sample as posted earlier?
and send me the full zip with a fully working example.???
I know i may be asking a bit much, but i need to get my head around the whole thing.
sorry to be a pain…..:-(

Uplink1001

[Brandon]

If you drop this mobi file into the zip contents (overwriting the original one) it should work. But when I get home tonight I will try to remember to upload my test folder for it.

[Author]

Posts