Forum | Appery.io

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&#46;mp3"></audio>';
var audio = jQuery(audioText);
jQuery("body")&#46;append(audio);
var au = jQuery("#yourAudio")[0];

if (au&#46;paused === false) {
au&#46;pause();
&#47;&#47; alert('music paused');
} else {
au&#46;play();
&#47;&#47; 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

HI Eric,

The solution for this goal is:

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

   precode

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

   };
   jQuery(window)&#46;bind("load", onLoad);

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

   if (au[0] && au[0]&#46;play) au[0]&#46;play();
   };

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

   if (au[0] && au[0]&#46;play) au[0]&#46;pause();
   };
   /code/pre

2. When you need to play new track use following JS code:

   pre

   PlayTrack("http:&#47;&#47;demos&#46;w3avenue&#46;com/html5-unleashed-tips-tricks-and-techniques/demo-audio&#46;mp3")

   /pre

3. To stop current played track you can use following JS code:

   pre

   StopPlayTrack();

   /pre

   That's all.

   Regards.

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!

Eric,

It seems you did not do first step correctly.

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

Regards.

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

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

&#47;&#47;I don't think these made a difference below&#46;&#46;&#46;&#46;but I had them in anyways&#46;
&#47;&#47;jQuery(window)&#46;bind("load", onLoad);
function PlayTrack(src) {
var au = jQuery("#yourAudio");
au&#46;attr("src", src);
if (au[0] && au[0]&#46;play) au[0]&#46;play();
}
function StopPlayTrack() {
var au = jQuery("#yourAudio");
if (au[0] && au[0]&#46;play) au[0]&#46;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]&#46;paused === false) {
if (au[0] && au[0]&#46;play) au[0]&#46;pause();
&#47;&#47; alert('music paused');
} else {
var oldSource = au&#46;attr("src");
var btnSource = "http:&#47;&#47;demos&#46;w3avenue&#46;com/html5-unleashed-tips-tricks-and-techniques/demo-audio&#46;mp3&quot
if (oldSource != btnSource)
au&#46;attr("src", btnSource);
if (au[0] && au[0]&#46;play) au[0]&#46;play();
&#47;&#47; 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

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!

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?