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
Contributor
icq782443
Posts: 22
Registered: ‎02-21-2012
My Device: Playbook torch 9800
Accepted Solution

audio 'skips/stutters' second time it's played.

I am building an app that reuses several sounds over and over. I am running into a problem with the audio tag when a sound is replayed. 

 

The first time the sound is played it plays fine, but subsequent times it "stutters" at the beginning of the sound clip.

 

I've broken it down to it's simplest form:

 

<html>
<head>
<title>sound test</title>
</head>
<body>
 <audio src="Right.mp3" controls></audio>
 </body>
</html>

 

I've posted a working sample at http://www.tristancater.com/playbook

This is works fine in chrome, but you will experience the stutter through the PlayBook browser.

 

I realize I can re-create the sound every time i want to use it which eliminates this problem. But doing this I was running into memory issues because every audio element is loaded into memory and I could not find a way to release it.

 

var sound = "Right";


function playSound(sound){

snd = new Audio(sound+".mp3");
snd.play();
}

 

I thought I had found a work around for this by doing this:

 

var sound = "Right";

 

function playSound(sound){
snd = new Audio(sound+".mp3");

snd.addEventListener("ended", function(){
snd.src="";
}, false);

snd.play();
}

This solved the memory eating issue however, this caused random app crashes.

 

I would love to hear any solutions for repeating audio. I'm sure it's a common thing in games.

Developer
nathanpc
Posts: 134
Registered: ‎05-19-2012
My Device: Torch 9800, PlayBook 64GB, Dev Alpha

Re: audio 'skips/stutters' second time it's played.

Could you debug that code on Chrome and add breakpoints at snd = new Audio(sound+".mp3")snd.src="" and snd.play(). Check what's happening, because I think it's creating multiple Audio instances and calling all them at the same time.

If I helped you please click the "Like" button to support my work.
My apps: CherryNotes - Bookmarked - Requests
Social Me: about.me - Twitter
Contributor
icq782443
Posts: 22
Registered: ‎02-21-2012
My Device: Playbook torch 9800

Re: audio 'skips/stutters' second time it's played.

Yes using that code it recreates the instance of the sound, but that does not cause shuddering audio. 

 

Using that code each instance is loaded into memory and eventually you can use all the free memory in your playbook causing the app to crash and sometimes even having to reboot the playbook to free the memory.

Contributor
icq782443
Posts: 22
Registered: ‎02-21-2012
My Device: Playbook torch 9800

Re: audio 'skips/stutters' second time it's played.

I currently have working code for anyone who is interested.

 

Although this is not ideal...

 

var sndRight = new Audio("Right.mp3");

 

function playSound(){

   sndRight.src="Right.mp3";
   snd.play();

}

 

Pros: No "stutter" the second time the clip is played.

           No memory issues because we're not creating multiple instances of the sound.

           Haven't seen any random crashing.


Cons: It causes a lag while the audio is loaded each time. 

 

So if anyone has any better solutions I'd still love to hear them. That loading lag is a issue I'd prefer not to have.

Contributor
icq782443
Posts: 22
Registered: ‎02-21-2012
My Device: Playbook torch 9800

Re: audio 'skips/stutters' second time it's played.

[ Edited ]

I thought I would share my final solution to this problem:

<script type="text/javascript">// 
// This is a reusable function that will 
// a) create a duplicate of the sound 
// b) alternate between the two sound files 
// c) reload the other one so it's ready for the next play

var audio2 = function (filename) {
	return {
		audio1: new Audio(filename),
		audio2: new Audio(filename),
		usePrimary: false,
		intName: filename,
		play: function () {
			if (this.usePrimary) {
				this.audio1.play();
				this.audio2.load();
			} else {
				this.audio2.play();
				this.audio1.load();
			}
			this.usePrimary = !this.usePrimary;
		}
	};
}

//Define all your sounds here:
var sndLeft = new audio2("Left.wav");
var sndRight = new audio2("Right.wav");
var sndBang = new audio2("Bang.wav");
var sndDing = new audio2("Ding.wav");

//call the sounds by doing something like this:
function playSnd(){
	sndLeft.play();
}
</script>


Happy coding...

New Member
9898052953
Posts: 1
Registered: ‎06-15-2012
My Device: curve9220

Re: audio 'skips/stutters' second time it's played.

[ Edited ]

i have audio recording pl your software my Mobil massage

Developer
cwong15
Posts: 193
Registered: ‎02-27-2009
My Device: Not Specified

Re: audio 'skips/stutters' second time it's played.

Your code is probably the best solution so far to the problem of repeating sound clips in WebWorks on Playbook. If I play one sound clip (for example, sndLeft in your example) repeatedly, the sound plays without stuttering. But if I alternate between two sound clips (for example, sndLeft.play(), then sndRight.play(), then sndLeft.play() etc) I still hear the stuttering. My observed behavior is probably different from yours because I am using different sound files (very short clips). 

 

The funny thing is that if I create an audio element with controls (<audio controls='controls' ...>...), I can play that clip, manually drag the slider back to the beginning and play again without stuttering. Unfortunately, there is no programmatic control over that slider control. 

 

Unfortunately, for my own needs it looks like I'll have to wait for a fix from RIM. I  filed a JIRA issue in February, but it's probably not visible to the public (TABLET-501). Thanks for sharing your code and experience.

Developer
razorek
Posts: 65
Registered: ‎06-28-2012
My Device: BlackBerry Z10LE

Re: audio 'skips/stutters' second time it's played.

I have also struggled with HTML5 audio on the PlayBook and I have found a solution that seems to be working perfectly fine.

 

First have a look at Tunneltilt sample from BlackBerry:

https://github.com/blackberry/WebGL-Samples/tree/master/tunneltilt

See the files "sounds.js", "Readme.md" and folder blackberry.custom.audio

 

They play audio using an adobe air extension, not by using HTML5. This extension has absolutely no problem with playing multiple sound at the same time and the sound is clear. There are some things to notice, thou:

  1. I wasn't able to play wav files so I had to convert all audio files to mp3
  2. The sound files cannot be too short, so I added some silence at the end of the sound. From my tests I have found that the sound files shold be at least 130 - 130 milliseconds long.
  3. Ripple emulator (in it's current version) doesn't support extensions, so you won't hear any sound until you deplay your application.

 

Here's an article that discusses extensions:

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Tutorial-for-Writing-WebWorks-Ex...

 

Just one last thing. I think that they have a memory leak in the extension code, so here's my version of the "CustomAudio.as" file:

package blackberry.custom.audio
{
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.media.SoundTransform;
	import flash.net.URLRequest;

	import webworks.extension.DefaultExtension;
	
	public class CustomAudio extends DefaultExtension
	{
		public function CustomAudio() {
			super();
		}

		override public function getFeatureList():Array {
			return new Array ("blackberry.custom.audio");
		}
		
		public function playFile(eFileName:String, eLoops:int, eVolume:Number, ePan:Number):Number {
			var req:URLRequest = new URLRequest(eFileName);
			var snd:Sound = new Sound();
			var channel:SoundChannel = new SoundChannel();
			snd.load(req);
			var pausePosition:int = channel.position;
			var sndTransform:SoundTransform = new SoundTransform(eVolume, ePan);
			channel = snd.play(pausePosition, eLoops, sndTransform);
			return 0;
		}
		
		public function setVolume(eSoundID:Number, eNewVolume:Number):void {
			//this method has been disabled
		}
	}
}

 

Hope it helps.

Contributor
icq782443
Posts: 22
Registered: ‎02-21-2012
My Device: Playbook torch 9800

Re: audio 'skips/stutters' second time it's played.

Thanks for your reply. Unfortunately the clips I want to play are all very short and it doesn't sound like this will work for this. My above solution works for my current project.

 

My next project involves a much more random and often overlapping short sound clips (I was seeing a lag in my animations when the load() event was called) so I have been looking into soundjs which does the same sort of thing, passes the sound off to a different (flash) player to handle. I haven't explored it completely but it looks promising. 

Contributor
icq782443
Posts: 22
Registered: ‎02-21-2012
My Device: Playbook torch 9800

Re: audio 'skips/stutters' second time it's played.

[ Edited ]

I have just found out my solution(the one with the alternating copies of the same sound) only works with developer preview 2.1.0.560 whether or not it will work when 2.1 is officially released is yet to be seen. 

 

The solution provided by razorek works very well.

 

@razorek Thank you for your help. You provided some really great information. I wish I had revisited this earlier.