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
Posts: 28
Registered: ‎07-19-2011
My Device: 9800 and Playbook
My Carrier: Telus
Accepted Solution

Audio HTML5 Autoplay WebWorks or play on click

This is specific for BB - works fine on PB.

How does one get the HTML5 Audio tag to work in a webworks app with the Autoplay option?

Ex: Audio element's src changed via javascript then I load then audioElement.play() - this doesn't work, you have to bind the click of another link or button to audioElement.play() and click AGAIN...

Any ideas?

function playSongNow(currentID) {
var audioElement = document.createElement('audio');
audioElement.setAttribute('autoplay', 'true');
audioElement.setAttribute('preload', 'true');
audioElement.setAttribute('src', 'http://' + sessionStorage.url + ':' + sessionStorage.port + '/rest/stream.view?u=' + sessionStorage.user + '&p=' + sessionStorage.pass + '&v=1.6.0&c=BerrySonic&id=' + currentID);
audioElement.load();
audioElement.addEventListener("canplaythrough", function() {
    audioElement.play();
    $(".duration span").html(audioElement.duration);
    $(".filename span").html(audioElement.src);
}, true);
$('.play').click(function() {
    audioElement.play();
});
$('.pause').click(function() {
    audioElement.pause();
});
$('.volumeMax').click(function() {
    audioElement.volume=1;
});
$('.volumestop').click(function() {
    audioElement.volume=0;
});
$('.stop').click(function() {
    audioElement.pause();
    audioElement.currentTime = 0;
});
$('.playatTime').click(function() {
    audioElement.currentTime= 35; //Testing skipping so used 35
    audioElement.play();
});
}
Trusted Contributor
Posts: 119
Registered: ‎11-28-2011
My Device: 9930
My Carrier: Verizon

Re: Audio HTML5 Autoplay WebWorks or play on click

I'm having a similar/same problem. When I first set the src the audio tag works and streams the media.

When I change the SRC, the audio doesn't play the new stream.

Were you able to resolve this? I'm still at a loss but  doing research.

Contributor
Posts: 28
Registered: ‎07-19-2011
My Device: 9800 and Playbook
My Carrier: Telus

Re: Audio HTML5 Autoplay WebWorks or play on click

This has worked for me since

function playSongNow(currentID) {
    $('#song-loader').show();

    var audioElement = document.createElement('audio');
    audioElement.src='http://' + sessionStorage.url + ':' + sessionStorage.port + '/rest/stream.view?u=' + sessionStorage.user + '&p=' + sessionStorage.pass + '&v=1.6.0&c=BerrySonic&id=' + currentID;

    audioElement.load();

    audioElement.addEventListener('ended', function() {
        //alert('ended');
    });

    audioElement.addEventListener('canplay', function() {
        audioElement.play();
        $('#song-loader').hide();
        $('.play-pause').attr('id', 'pause-song');
    });

}

 

For some reason the canplaythrough on the BB simply doesn't work. Basically here i just click a song and it works.

Trusted Contributor
Posts: 119
Registered: ‎11-28-2011
My Device: 9930
My Carrier: Verizon

Re: Audio HTML5 Autoplay WebWorks or play on click

Could you tell me what devices you are running this script on?

I couldn't get this to work in Chrome or on a Curve 9330 with OS6.

Contributor
Posts: 28
Registered: ‎07-19-2011
My Device: 9800 and Playbook
My Carrier: Telus

Re: Audio HTML5 Autoplay WebWorks or play on click

9810 Torch and Playbook.

Trusted Contributor
Posts: 119
Registered: ‎11-28-2011
My Device: 9930
My Carrier: Verizon

Re: Audio HTML5 Autoplay WebWorks or play on click

It seems that the audio variable is being recreated when your function runs.

So what's happening is that in Chrome, I play one stream and that's fine. When I select a second stream and run the the function to play that one, the first stream continues to play and the second stream also plays- two streams at once.

I compiled my code anyway for my test device, but when I tried to play nothing happened- the first stream did not even play.

Trusted Contributor
Posts: 119
Registered: ‎11-28-2011
My Device: 9930
My Carrier: Verizon

Re: Audio HTML5 Autoplay WebWorks or play on click

Are you using Jquery?

Sorry if the answer is obvious. I'm still learning Javascript.

I don't use Jquery myself in the program I'm tryign to get running- only javascript.

Contributor
Posts: 28
Registered: ‎07-19-2011
My Device: 9800 and Playbook
My Carrier: Telus

Re: Audio HTML5 Autoplay WebWorks or play on click

Right - should work if you change the src attr this too. I am using zepto (jquery is similar).

Trusted Contributor
Posts: 119
Registered: ‎11-28-2011
My Device: 9930
My Carrier: Verizon

Re: Audio HTML5 Autoplay WebWorks or play on click

Thanks for your help on this.

I'm going to start from the beginning and dot my i's, cross my t's- make sure I'm doing exactly what you are.

If I can get this to work that would be great.

Thanks again for taking the time to reply. I appreciate it.

Contributor
Posts: 28
Registered: ‎07-19-2011
My Device: 9800 and Playbook
My Carrier: Telus

Re: Audio HTML5 Autoplay WebWorks or play on click

No problem - I'll post a cleaner solution when I have mine working though I've procrastinating :smileyhappy: