Can't get HTML5 Audio to loop

DueNorth · ‎09-25-2012

I can't seem to get HTML5 audio (.wav) to loop.

var bgaudio = document.createElement("audio");
bgaudio.src="sounds/background.wav";
bgaudio.loop = true;
bgaudio.play();

It plays one time, but doesn't loop. Am I doing something wrong?

I even tried putting in an audio tag in HTML

<audio id="audiobg1" preload>
   <source src="sounds/background.wav">
</audio>

with the following Javascript&colon;

document.getElementById('audiobg1').addEventListener('ended', function(){
this.currentTime = 0;}, false);

document.getElementById('audiobg1').play();

Still.. plays once but doesn't loop. I do have other sound playing but they have their own ID.

Any clue? Using Webworks with BBUI.js

Thanks.

oros · ‎04-12-2010

Hi there,

Which device/OS version are you testing on? My approach is generally as follows:

var track = document.createElement('audio');
track.setAttribute('src', 'audio/myfile.mp3');
track.setAttribute('preload', 'auto');
track.setAttribute('loop', 'true');
track.setAttribute('autoplay', 'true'); /* Optional. */
track.load();

The key difference is making the settings through the setAttribute function. I've had success with this in the past, cna you give it a shot and let me know how it goes?

Please note that I will be unavailable between May 19th and June 4th. Sincere apologies for any delays during this time. I will do my best to follow-up as soon as I am able.

Erik Oros
BlackBerry Development Advisor
@WaterlooErik

DueNorth · ‎09-25-2012

It didn't work in Ripple and on the Dev Alpha A (latest OS). I will try out your code and see if that works.

Thank you.

DueNorth · ‎09-25-2012

Hi Erik,

Tried out your code with my sound file. Didn't work.

I tried changing the file format to .mp3 (mine was a .wav), also didn't work.

I tried it without having any other audio channel in play. No loop. It just ends. STRANGE.

oros · ‎04-12-2010

I'll hack together a sample and will share it here (assuming I can get it working.)

Please note that I will be unavailable between May 19th and June 4th. Sincere apologies for any delays during this time. I will do my best to follow-up as soon as I am able.

Erik Oros
BlackBerry Development Advisor
@WaterlooErik

oros · ‎04-12-2010

Hello again,

Here is a sample index.html file that I am running in Ripple and successfully hearing my audio track looping. The audio starts to play once Ripple is loaded and the window content is fully populated.

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<script type="text/javascript">
			document.addEventListener('DOMContentLoaded', function () {
				if (typeof blackberry !== 'undefined') {
					var track = document.createElement('audio');
					track.setAttribute('src', 'audio.mp3');
					track.setAttribute('preload', 'auto');
					track.setAttribute('loop', 'true');
					track.setAttribute('autoplay', 'true');
					track.load();
				}
			}, false);
		</script>
	</body>
</html>

Please note that I will be unavailable between May 19th and June 4th. Sincere apologies for any delays during this time. I will do my best to follow-up as soon as I am able.

Erik Oros
BlackBerry Development Advisor
@WaterlooErik

DueNorth · ‎09-25-2012

Thanks Erik, I am going to give it a try. It haven't tried it with just straight HTML5. I have it with BBUI.js.

Can you wrap it with BBUI.js? It would trigger Webworks + BBUI.js which could be causing the problem.

DueNorth · ‎09-25-2012

Hi Erik,

Thank you for all your help and the code posting. It didn't work,,, and it wasn't because of your code (and perhaps mine also). It has something to do with the Ripple Services. It turns out that HTML5 Audio looping doesn't work on http://localhost:9910 .

I simplify it to just

<audio controls autoplay loop>
  <source src="music.wav" type="audio/wav" />
</audio>

It wouldn't loop when I play it on http://localhost:9910 (Ripple Services).

Tried it on IIS, http://localhost, and it would play with loop (without Ripple). Enabled Ripple and it would work with looping*.

*Strange part is if I run an app that I used to have on the Ripple Services directory on the IIS folder, I would lose all sound. Looking at the Developer Mode / Network tab it looks like it was trying to "GET" the sound but was cancelled.

Fustrating and I hope the new updates would fix it.

oros · ‎04-12-2010

Hi there, that's a great find. I haven't seen or heard of that before myself but that definitely needs to be reported to our Ripple team. Could you please log that as a bug report at the following URL with as much information as possible?
https://github.com/blackberry/Ripple-UI/issues

This tracker goes directly to our Ripple devs so it would be the best way to get visibility on this.

I honestly don't know why this hosting would make a difference unless there is some security based reason, but the Ripple team would be the best for this.

Please note that I will be unavailable between May 19th and June 4th. Sincere apologies for any delays during this time. I will do my best to follow-up as soon as I am able.

Erik Oros
BlackBerry Development Advisor
@WaterlooErik

Bhaal29 · ‎11-30-2012

Hello

I have a similar problem. I just found that using the ripple extension for Chrome I can get to listen my live .m3u in ripple, after playing it alone without Ripple. However it seems not to work in any other case and even when I´m packaging my app, Ripple warns me that Blackberry.audio feature is not found.

Any advice?

Thanks in advance!

R.

Welcome!

Web and WebWorks Development

Can't get HTML5 Audio to loop

Re: Can't get HTML5 Audio to loop

Re: Can't get HTML5 Audio to loop

Re: Can't get HTML5 Audio to loop

Re: Can't get HTML5 Audio to loop

Re: Can't get HTML5 Audio to loop

Re: Can't get HTML5 Audio to loop

Re: Can't get HTML5 Audio to loop

Re: Can't get HTML5 Audio to loop

Re: Can't get HTML5 Audio to loop