Multiple HTML Audio elements between pages

Mon Dec 29, 2014 9:27 pm

This is sort of a continuation of a previous question I had here: https://getsatisfaction.com/apperyio/...

I have multiple buttons using this code which I modified from the question linked to above:

precodeaudioText = '<audio id="yourAudio" src="audiosource.mp3"></audio>';
var audio = jQuery(audioText);
jQuery("body").append(audio);
var au = jQuery("#yourAudio")[0];

if (au.paused === false) {
au.pause();
// alert('music paused');
} else {
au.play();
// alert('music playing');
}/code/pre

When I first tested this out, it seemed I could have multiple buttons that would change the source of the audio so that when one wants to listen to audio source #2 they don't have to first stop audio source #1 before listening to audio source #2. This is what I want the app to do.

Now, it seems to only play the first audio source that was selected no matter what button (and audio source) I press.

Is this a bug or is this the intended behavior?

If this is how the HTML5 audio player is supposed to behave, is there a way I can change the source in the HTML5 player without creating a new HTML5 audio element?

Thanks,
Eric

Tue Dec 30, 2014 12:58 am

HI Eric,

The solution for this goal is:

Add new JS asset. And populate it with following js code:

precode

var onLoad = function() {
var audioText = '<audio id="yourAudio" controls=""><source src="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.ogg"><source></audio>';
var audio = jQuery(audioText);
jQuery("body").append(audio);
console.log("load");

};
jQuery(window).bind("load", onLoad);

function PlayTrack(src) {
var au = jQuery("#yourAudio");
au.attr("src", src);

if (au[0] && au[0].play) au[0].play();
};

function StopPlayTrack() {
var au = jQuery("#yourAudio");

if (au[0] && au[0].play) au[0].pause();
};
/code/pre
When you need to play new track use following JS code:

pre

PlayTrack("http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.mp3")

/pre
To stop current played track you can use following JS code:

pre

StopPlayTrack();

/pre

That's all.

Regards.

Tue Dec 30, 2014 4:20 am

I added step #1 to my start page. I added #2 & #3 to a few other pages. The problem is that I am getting a ReferenceError: Can't find variable: PlayTrack when trying to call PlayTrack() or StopPlayTrack().

Am I missing something? I tried adding it on the same page as well but with a different button. I still am getting the reference error though.

Thanks for your help!

Tue Dec 30, 2014 5:13 am

Eric,

It seems you did not do first step correctly.

You need to create new JS Asset. And populate it with given code.

Regards.

Tue Dec 30, 2014 6:26 am

To answer my own question, I had this on my start screen:

precode var audioText = '<audio id="yourAudio"><source src="http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.ogg"><source></audio>';
var audio = jQuery(audioText);
jQuery("body").append(audio);
console.log("load");

//I don't think these made a difference below....but I had them in anyways.
//jQuery(window).bind("load", onLoad);
function PlayTrack(src) {
var au = jQuery("#yourAudio");
au.attr("src", src);
if (au[0] && au[0].play) au[0].play();
}
function StopPlayTrack() {
var au = jQuery("#yourAudio");
if (au[0] && au[0].play) au[0].pause();
}/code/pre

Then on pages that had buttons to start/pause the audio element I added this:
precodevar au = jQuery("#yourAudio");
if (au[0].paused === false) {
if (au[0] && au[0].play) au[0].pause();
// alert('music paused');
} else {
var oldSource = au.attr("src");
var btnSource = "http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.mp3&quot
if (oldSource != btnSource)
au.attr("src", btnSource);
if (au[0] && au[0].play) au[0].play();
// alert('Old Source: ' + oldSource + '/nNew Source: ' + btnSource);
}/code/pre

I think au.attr("src", btnSource) was the best hint.

Thanks for your help!

Regards,
Eric

Tue Dec 30, 2014 6:34 am

Sorry, I did not see your reply before I made my changes to my app. I think I understand what you are saying now and that probably would have worked...but I have already implemented another way that also works.

Thanks for your help once again!

Mon Jun 22, 2015 10:22 pm

In the Appery Tester, the audio component is showing when I tried the above code as soon as the App started. This doesn't show in the brower. I see a Play Button on the start page. How can I hide that?