Audio between pages

[Eric Mammolenti]

Hi,

I have an app where I have a page dedicated to audio they can listen to. The problem is that I want them to be able to browse throughout the rest of the app and still be able to listen to that audio (It is a long track). I am just using the standard html 5 element provided.

When the user navigates away from the page, the audio stops. The funny thing though is that if the user exits the app while the audio is still playing (at least on an iPad), the audio will continue playing.

Is there a way to make the audio playable throughout the app instead of just on a single page?

Thanks!

[Yurii Orishchuk]

Hi Eric,

When you put audio component on the page this component being inside this page. When page closed - all components should be closed to.

So you need to use audio for all app.

Here is a solution:

1. Add to your start page "page load" event handler with action "run javascript".

2. Populate it with following JS code:

   pre

   var audioText = '';

   var audio = jQuery(audioText);

   jQuery("body").append(audio);

   var au = jQuery("#yourAudio")[0];
   if(au && au.play)
   au.play();

   /pre

   Also you can access to this audio element like in code above and make certain action.

   Regards.

[Eric Mammolenti]

Yurii,

Thanks for your quick reply.

I tried the code you gave me and replaced #yourAudio with a url for an mp3 on a server. It keeps giving me a syntax error and will not load the page.

Did I miss something?

Thanks,
Eric

[Yurii Orishchuk]

Eric,

I'm sorry..

That code was broken by getsatisfation.

Please use following one:

precode

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 src="http:&#47;&#47;demos&#46;w3avenue&#46;com/html5-unleashed-tips-tricks-and-techniques/demo-audio&#46;mp3"></audio>';

var audio = jQuery(audioText);

jQuery("body")&#46;append(audio);

var au = jQuery("#yourAudio")[0];
if(au && au&#46;play)
au&#46;play();

/code/pre

Also you need use your URL inside "audiotext". See "src" attribute.

Regards.

[Eric Mammolenti]

Thanks Yurii for your help! The above code works great.

Eric

[Eric Mammolenti]

One more question for you Yurii.

I have multiple buttons using this code which I modified from your answer:

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

[Matt Simoncavage]

Hi Yurri, is there a way to accomplish the above task without specifying the surce in the code? The reason being: My app is a music sharing app. So the source is pulled from the database, and will change depending on which post the user is currently playing. Thanks.

[Evgene Karachevtsev]

Hello Matt,

You need to set src attribute using codejqueryElement&#46;attr("src", valueOfSrc);/code

[Matt Simoncavage]

Hi Evgene, I tried the following but it didn't appear to work. I don't think I'm putting it in the right place. Can you take a look? Thanks.

code
var audioText = '<audio id="yourAudio" controls=""></audio>';

audioText&#46;attr( "src", Apperyio&#46;storage&#46;STORAGE_ID&#46;get() );

var audio = jQuery(audioText);
jQuery("body")&#46;append(audio);
var au = jQuery("#yourAudio")[0];
if(au && au&#46;play)
au&#46;play();
/code

[Evgene Karachevtsev]

Matt,

You're trying to set Attr before audio element is actually created.
So first you should create it with jQuery and then add attributes.
prevar audio = $( '')&#46;attr( "src", Apperyio&#46;storage&#46;STORAGE_ID&#46;get() );
$("body")&#46;append(audio);
var au = jQuery("#yourAudio")[0];
if(au && au&#46;play)
au&#46;play()/pre