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
Mamoka
Posts: 12
Registered: ‎03-07-2012
My Device: Curve 9300

Remove HTML5 audio

Hi,

 

In a webworks app built using jQueryMobile framework, inside one of my pages, I have an audio element created as follows:

 

$("#output").append('<audio id="notificationAudio" autoplay="autoplay" controls="controls"><source src="http://domain.com/audio.amr" /></audio>');

 

this works ok: app shows player and plays file.

 

But when I change page ($.mobile.changePage()),  i do remove the audio element as follows:

 

$("#notificationAudio").remove();
$("#output").empty();

 

but this doesn't work: player stays sticky in position, floating over content, even if it doesn't appear in DOM anymore!

 

This is happening on app and browser of OS6 (tested on both torch 9800 and curve 9300).

 

Any ideas?

 

Thanks in advance,

 

M.
 

BlackBerry Development Advisor
twindsor
Posts: 832
Registered: ‎07-15-2008
My Device: Passport
My Carrier: Bell

Re: Remove HTML5 audio

What about pausing the audio before removing it?

Tim Windsor
Open Source Technical Lead
Contributor
Mamoka
Posts: 12
Registered: ‎03-07-2012
My Device: Curve 9300

Re: Remove HTML5 audio

Hi Tim,

 

This doesn't seem to work. Pausing the audio prior to remove its DOM element has no effects at all...

Any other suggestion?

 

Thank you,

 

M.

Retired
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Remove HTML5 audio

Using Web Inspector, do you see any runtime errors when the following code runs?

 

$("#notificationAudio").remove();
$("#output").empty();

 

Curious if there is an error message that might reveal what the underlying problem is - a) bug in jQuery or b) media resource is locked while file is in use.

 

If the latter, what if you stopped the audio before removing it (as opposed to just pausing it)?

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Contributor
Mamoka
Posts: 12
Registered: ‎03-07-2012
My Device: Curve 9300

Re: Remove HTML5 audio

Hello Adam,

 

Unfortunately I do not have Web Inpsector as I'm on OS6.

File is streaming from remote server so I don't think it could be a file lock related issue.

HTML5 Audio element does not have a .stop() method, only .pause() seems to be available...

 

Regards,

 

M.

Retired
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Remove HTML5 audio

okay then lets try ruling jQuery out of the equation first

 

Instead of

 

$("notificationAPI").remove();

 

can you try raw DOM removal instead:

 

var element = document.getElementById("notificationAPI");
element.parentNode.removeChild(element);

 

If that still persists the problem - I suspect is related to the fact that the audio is being streamed.

 

 

My mistake about the .stop() method

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Contributor
Mamoka
Posts: 12
Registered: ‎03-07-2012
My Device: Curve 9300

Re: Remove HTML5 audio

Hi,

 

Thanks Adam for the other suggestion. Ruling out jQuery and using pure JavaScript didn't solve the issue.

 

I have prepared an example here:

http://109.168.126.199/audio/

 

If you open this link with a OS6 BB browser, and click on "Create audio tag" button, this will create the audio tag (you can check generated source code by clicking on "DOM" button) and autoplay a sample .mp3 file.

OK so far, but if you click on the "Remove audio tag" , although audio tag gets removed from DOM (again, click on "DOM" button to check source), the player will still be visible and floating over content...

 

No way to remove it!

This looks like a browser engine bug to me.

 

I would be grateful if other OS6 users could test the above link, and post here their results...

 

On my side, this happens on two devices I have running OS 6.0 - 2647

 

Thank you,

 

M.

Developer
Rcjuk
Posts: 62
Registered: ‎04-29-2010
My Device: N/A

Re: Remove HTML5 audio

[ Edited ]

Does the same on my 9800.

6.0.0.600 (2647)