Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
UberApps
Posts: 4
Registered: ‎02-08-2012
My Device: None (yet)

HTML5 Audio

[ Edited ]

I am playing about with HTML5 Audio a little at the moment, and I have a bit of an issue. I have the following code:

 

<body>
<script type="text/javascript">
var openDoor = document.createElement('audio');
openDoor.src='sounds/Door_Open.wav';

var footsteps = document.createElement('audio');
footsteps.src='sounds/Footstep.wav';
</script><br>
<input onclick="openDoor.play();" name="open_Door" value="Open Door" type="button"><br>
<input onclick="footsteps.play();" name="footsteps" value="Footsteps" type="button"><br>
</body>

 The problem is, whenever I try to play any sound for a second time (i.e. click the button, and once the sound finishes, click it again), the sound will "stutter" a bit; it's as if the first half a second or so plays, then it skips back to the start and plays the whole sound file.

 

The same code works perfectly in Chrome on my computer, so I guess it is some quirk of the PB browser, but I am wondering if there is some way around this?

 

EDIT: Found a workaround. I just call the load() function on each sound everytime before I play it. So the first <input> tag from above now looks like this:

 

<input onclick="openDoor.load();openDoor.play();" name="open_Door" value="Open Door" type="button">

 This seems to work, although occassionally it causes a momentary delay before the sound plays. I can live with that though, better than the stuttering.

 

Having said that, if anyone has a better solution to this problem, please go ahead and share it :smileyhappy:

Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: HTML5 Audio

You need to know how HTML5 Audio works.

 

There are two way to get it working to play every time you click the button. First is a loop of your audio needs to be set up in the element definition like follows:

 

var footsteps = document.createElement('audio');
footsteps.src='sounds/Footstep.wav';
footsteps.loop = true;

On the other hand you might want start playback from beginning every time you click play button, then you could use something like this:

 

<input onclick="footsteps.currentTime = 0; footsteps.play();" name="footsteps" value="Footsteps" type="button">

Hope you will find the solution that works best for your use case!!

 

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Please use plain text.
New Contributor
UberApps
Posts: 4
Registered: ‎02-08-2012
My Device: None (yet)

Re: HTML5 Audio

[ Edited ]

I had already tried the "footsteps.currentTime = 0;" solution, it did not work. I got the exact same behaviour as I did without it. Your suggestion of loop is invalid as I don't want to make the sound loop, but thanks for that anyway. I have at least found a solution myself (see edit in original post), so it's not too important, although I am just wondering now if there is a "better" or "cleaner" solution (e.g. if I had done something wrong in my code).

 

I'd also like to note that my original code worked perfectly in Chrome; I don't think it is a problem with my understanding of HTML5 Audio, but instead with the PB's implementation thereof.

Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: HTML5 Audio

[ Edited ]

Support for things like using "footsteps.currentTime = 0;" to go backwards to the beginning of a media file needs to supported by the API/implementation of the device/OS for the used media format. It might not be possible in every case for every codec/format.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Please use plain text.