Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #17791 > unrolled thread

html5 Audio

Back to article view | Back to comp.lang.javascript

Contents

  html5 Audio 123Jim <jnkjnjnini@uhnuhnunuhnuy.invalid> - 2012-12-21 23:41 +0000
    Re: html5 Audio Andrew Poulos <ap_prog@hotmail.com> - 2012-12-22 11:46 +1100
      Re: html5 Audio 123Jim <jnkjnjnini@uhnuhnunuhnuy.invalid> - 2012-12-22 13:31 +0000
        Re: html5 Audio 123Jim <jnkjnjnini@uhnuhnunuhnuy.invalid> - 2012-12-22 16:33 +0000
          Re: html5 Audio 123Jim <jnkjnjnini@uhnuhnunuhnuy.invalid> - 2012-12-22 23:16 +0000
            Re: html5 Audio David Mark <dmark.cinsoft@gmail.com> - 2013-01-05 17:54 -0800
              Re: html5 Audio David Mark <dmark.cinsoft@gmail.com> - 2013-01-05 18:06 -0800
              Re: html5 Audio David Mark <dmark.cinsoft@gmail.com> - 2013-01-05 23:18 -0800

#17791 — html5 Audio

Q: Is the html5 Audio code below cross browser and robust? It occurs to 
me that if the browser does not like 'canplaytype' but nevertheless 
needs ogg, not MP3 then it will fail (I've tested in the newest versions 
of IE, Firefox, Opera and Chrome with no problems)

var audio1 = new Audio();

if (!!audio1.canPlayType && audio1.canPlayType('audio/ogg; 
codecs="vorbis"') != "") {
	//alert('ogg sounds');
	var	click1snd = new Audio("click1.ogg");
	var	incorrectsnd = new Audio("incorrect.ogg");
	var	correctsnd = new Audio("correct.ogg");
}else{
	//alert('mp3 sounds');
	var	click1snd = new Audio("click1.mp3");
	var	incorrectsnd = new Audio("incorrect.mp3");
	var	correctsnd = new Audio("correct.mp3");
}

	click1snd.play();

My webpage: 
http://myweb.tiscali.co.uk/ladycroft/webdevfun/problem_solving.html

.... and here's the original source I modified:
http://html5doctor.com/html5-audio-the-state-of-play/

[toc] | [next] | [standalone]

#17794

On 22/12/2012 10:41 AM, 123Jim wrote:
> Q: Is the html5 Audio code below cross browser and robust? It occurs to
> me that if the browser does not like 'canplaytype' but nevertheless
> needs ogg, not MP3 then it will fail (I've tested in the newest versions
> of IE, Firefox, Opera and Chrome with no problems)
>
> var audio1 = new Audio();
>
> if (!!audio1.canPlayType && audio1.canPlayType('audio/ogg;
> codecs="vorbis"') != "") {
>      //alert('ogg sounds');
>      var    click1snd = new Audio("click1.ogg");
>      var    incorrectsnd = new Audio("incorrect.ogg");
>      var    correctsnd = new Audio("correct.ogg");
> }else{
>      //alert('mp3 sounds');
>      var    click1snd = new Audio("click1.mp3");
>      var    incorrectsnd = new Audio("incorrect.mp3");
>      var    correctsnd = new Audio("correct.mp3");
> }
>
>      click1snd.play();

Wouldn't it be better to add an audio element

<audio id="click1">
   <source src="click1.ogg" type="audio/ogg">
   <source src="click1.mp3" type="audio/mp3">
</audio>

to the page and then call

document.getElementById("click1").play();

to the page and let browsers sort out which one it can play?

Also what are you going to do about browsers that don't support the 
audio element?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#17797

On 22/12/2012 00:46, Andrew Poulos wrote:
> On 22/12/2012 10:41 AM, 123Jim wrote:
>> Q: Is the html5 Audio code below cross browser and robust? It occurs to
>> me that if the browser does not like 'canplaytype' but nevertheless
>> needs ogg, not MP3 then it will fail (I've tested in the newest versions
>> of IE, Firefox, Opera and Chrome with no problems)
>>
>> var audio1 = new Audio();
>>
>> if (!!audio1.canPlayType && audio1.canPlayType('audio/ogg;
>> codecs="vorbis"') != "") {
>>      //alert('ogg sounds');
>>      var    click1snd = new Audio("click1.ogg");
>>      var    incorrectsnd = new Audio("incorrect.ogg");
>>      var    correctsnd = new Audio("correct.ogg");
>> }else{
>>      //alert('mp3 sounds');
>>      var    click1snd = new Audio("click1.mp3");
>>      var    incorrectsnd = new Audio("incorrect.mp3");
>>      var    correctsnd = new Audio("correct.mp3");
>> }
>>
>>      click1snd.play();
>
> Wouldn't it be better to add an audio element
>
> <audio id="click1">
>    <source src="click1.ogg" type="audio/ogg">
>    <source src="click1.mp3" type="audio/mp3">
> </audio>
>
> to the page and then call
>
> document.getElementById("click1").play();
>
> to the page and let browsers sort out which one it can play?
>
> Also what are you going to do about browsers that don't support the
> audio element?
>
> Andrew Poulos


Thanks Andrew, That seem like a better way to add audio to my webpage.

For browsers that don't support the Audio element this looks like the 
way to go: http://www.brandaiddesignco.com/blog/html5-audio-made-easy/104/

So the audio element now looks like this:
<audio id="click1snd">
     <source src="click1.ogg" type="audio/ogg">
     <source src="click1.mp3" type="audio/mp3">
     <embed src="click1.mp3" hidden="true" />
  </audio>

I'll need to dig out an old XP computer to test it though.

[toc] | [prev] | [next] | [standalone]

#17798

On 22/12/2012 13:31, 123Jim wrote:
> On 22/12/2012 00:46, Andrew Poulos wrote:
>> On 22/12/2012 10:41 AM, 123Jim wrote:
>>> Q: Is the html5 Audio code below cross browser and robust? It occurs to
>>> me that if the browser does not like 'canplaytype' but nevertheless
>>> needs ogg, not MP3 then it will fail (I've tested in the newest versions
>>> of IE, Firefox, Opera and Chrome with no problems)
>>>
>>> var audio1 = new Audio();
>>>
>>> if (!!audio1.canPlayType && audio1.canPlayType('audio/ogg;
>>> codecs="vorbis"') != "") {
>>>      //alert('ogg sounds');
>>>      var    click1snd = new Audio("click1.ogg");
>>>      var    incorrectsnd = new Audio("incorrect.ogg");
>>>      var    correctsnd = new Audio("correct.ogg");
>>> }else{
>>>      //alert('mp3 sounds');
>>>      var    click1snd = new Audio("click1.mp3");
>>>      var    incorrectsnd = new Audio("incorrect.mp3");
>>>      var    correctsnd = new Audio("correct.mp3");
>>> }
>>>
>>>      click1snd.play();
>>
>> Wouldn't it be better to add an audio element
>>
>> <audio id="click1">
>>    <source src="click1.ogg" type="audio/ogg">
>>    <source src="click1.mp3" type="audio/mp3">
>> </audio>
>>
>> to the page and then call
>>
>> document.getElementById("click1").play();
>>
>> to the page and let browsers sort out which one it can play?
>>
>> Also what are you going to do about browsers that don't support the
>> audio element?
>>
>> Andrew Poulos
>
>
> Thanks Andrew, That seem like a better way to add audio to my webpage.
>
> For browsers that don't support the Audio element this looks like the
> way to go: http://www.brandaiddesignco.com/blog/html5-audio-made-easy/104/
>
> So the audio element now looks like this:
> <audio id="click1snd">
>      <source src="click1.ogg" type="audio/ogg">
>      <source src="click1.mp3" type="audio/mp3">
>      <embed src="click1.mp3" hidden="true" />
>   </audio>
>
> I'll need to dig out an old XP computer to test it though.
>

Scratch that, I forgot about the Developer tools in IE9 which does let 
me run the code in IE8.
I find that IE8 objects to the play() method here: 
document.getElementById("click1").play(); and therefore wont play the 
sound file. .. currently looking for a solution.

[toc] | [prev] | [next] | [standalone]

#17801

On 22/12/2012 16:33, 123Jim wrote:
> On 22/12/2012 13:31, 123Jim wrote:
>> On 22/12/2012 00:46, Andrew Poulos wrote:
>>> On 22/12/2012 10:41 AM, 123Jim wrote:
>>>> Q: Is the html5 Audio code below cross browser and robust? It occurs to
>>>> me that if the browser does not like 'canplaytype' but nevertheless
>>>> needs ogg, not MP3 then it will fail (I've tested in the newest
>>>> versions
>>>> of IE, Firefox, Opera and Chrome with no problems)
>>>>
>>>> var audio1 = new Audio();
>>>>
>>>> if (!!audio1.canPlayType && audio1.canPlayType('audio/ogg;
>>>> codecs="vorbis"') != "") {
>>>>      //alert('ogg sounds');
>>>>      var    click1snd = new Audio("click1.ogg");
>>>>      var    incorrectsnd = new Audio("incorrect.ogg");
>>>>      var    correctsnd = new Audio("correct.ogg");
>>>> }else{
>>>>      //alert('mp3 sounds');
>>>>      var    click1snd = new Audio("click1.mp3");
>>>>      var    incorrectsnd = new Audio("incorrect.mp3");
>>>>      var    correctsnd = new Audio("correct.mp3");
>>>> }
>>>>
>>>>      click1snd.play();
>>>
>>> Wouldn't it be better to add an audio element
>>>
>>> <audio id="click1">
>>>    <source src="click1.ogg" type="audio/ogg">
>>>    <source src="click1.mp3" type="audio/mp3">
>>> </audio>
>>>
>>> to the page and then call
>>>
>>> document.getElementById("click1").play();
>>>
>>> to the page and let browsers sort out which one it can play?
>>>
>>> Also what are you going to do about browsers that don't support the
>>> audio element?
>>>
>>> Andrew Poulos
>>
>>
>> Thanks Andrew, That seem like a better way to add audio to my webpage.
>>
>> For browsers that don't support the Audio element this looks like the
>> way to go:
>> http://www.brandaiddesignco.com/blog/html5-audio-made-easy/104/
>>
>> So the audio element now looks like this:
>> <audio id="click1snd">
>>      <source src="click1.ogg" type="audio/ogg">
>>      <source src="click1.mp3" type="audio/mp3">
>>      <embed src="click1.mp3" hidden="true" />
>>   </audio>
>>
>> I'll need to dig out an old XP computer to test it though.
>>
>
> Scratch that, I forgot about the Developer tools in IE9 which does let
> me run the code in IE8.
> I find that IE8 objects to the play() method here:
> document.getElementById("click1").play(); and therefore wont play the
> sound file. .. currently looking for a solution.

OK -- here is my solution for browsers that don't support the html5 
audio tag. Tested in IE7 and IE8 .. I'm embedding an mp3 for those browsers

first we test for html5 audio support
var test_audio= document.createElement("audio")

then we create a boolean to use as a flag whenever we need to test
var test_audio_true = (test_audio.play)? true : false;

modified from here: 
http://www.javascriptkit.com/javatutors/createelementcheck.shtml

.. and here is one if the tests:
if(test_audio_true){
    document.getElementById("click1snd").play();
    }else{
    document.getElementById("soundsa").innerHTML = "<embed 
src=\"click1.mp3\" hidden=\"true\" autoplay=\"true\" />";
    }

... and here is my page: 
http://myweb.tiscali.co.uk/ladycroft/webdevfun/problem_solving.html

Only problem I am detecting is a slight delay in IE7 and 8 as they embed 
the plugin to play the sound, but that could be particular to my 
computer. ....

[toc] | [prev] | [next] | [standalone]

#17977

On Dec 22 2012, 6:16 pm, 123Jim <jnkjnjn...@uhnuhnunuhnuy.invalid>
wrote:
> On 22/12/2012 16:33, 123Jim wrote:
>
>
>
>
>
>
>
>
>
> > On 22/12/2012 13:31, 123Jim wrote:
> >> On 22/12/2012 00:46, Andrew Poulos wrote:
> >>> On 22/12/2012 10:41 AM, 123Jim wrote:
> >>>> Q: Is the html5 Audio code below cross browser and robust? It occurs to
> >>>> me that if the browser does not like 'canplaytype' but nevertheless
> >>>> needs ogg, not MP3 then it will fail (I've tested in the newest
> >>>> versions
> >>>> of IE, Firefox, Opera and Chrome with no problems)
>
> >>>> var audio1 = new Audio();
>
> >>>> if (!!audio1.canPlayType && audio1.canPlayType('audio/ogg;
> >>>> codecs="vorbis"') != "") {
> >>>>      //alert('ogg sounds');
> >>>>      var    click1snd = new Audio("click1.ogg");
> >>>>      var    incorrectsnd = new Audio("incorrect.ogg");
> >>>>      var    correctsnd = new Audio("correct.ogg");
> >>>> }else{
> >>>>      //alert('mp3 sounds');
> >>>>      var    click1snd = new Audio("click1.mp3");
> >>>>      var    incorrectsnd = new Audio("incorrect.mp3");
> >>>>      var    correctsnd = new Audio("correct.mp3");
> >>>> }
>
> >>>>      click1snd.play();
>
> >>> Wouldn't it be better to add an audio element
>
> >>> <audio id="click1">
> >>>    <source src="click1.ogg" type="audio/ogg">
> >>>    <source src="click1.mp3" type="audio/mp3">
> >>> </audio>
>
> >>> to the page and then call
>
> >>> document.getElementById("click1").play();
>
> >>> to the page and let browsers sort out which one it can play?
>
> >>> Also what are you going to do about browsers that don't support the
> >>> audio element?
>
> >>> Andrew Poulos
>
> >> Thanks Andrew, That seem like a better way to add audio to my webpage.
>
> >> For browsers that don't support the Audio element this looks like the
> >> way to go:
> >>http://www.brandaiddesignco.com/blog/html5-audio-made-easy/104/


Browsers that don't support the AUDIO element will render the fallback
content.
>
> >> So the audio element now looks like this:
> >> <audio id="click1snd">
> >>      <source src="click1.ogg" type="audio/ogg">
> >>      <source src="click1.mp3" type="audio/mp3">
> >>      <embed src="click1.mp3" hidden="true" />
> >>   </audio>
>
> >> I'll need to dig out an old XP computer to test it though.
>
> > Scratch that, I forgot about the Developer tools in IE9 which does let
> > me run the code in IE8.

Scratch that. IE9 compatibility modes aren't close to perfect replicas
of the old versions. IETester doesn't work well on Windows 7 either,
so you have to have at least one XP box if you are unsure about
anything.

> > I find that IE8 objects to the play() method here:
> > document.getElementById("click1").play(); and therefore wont play the
> > sound file. .. currently looking for a solution.
>
> OK -- here is my solution for browsers that don't support the html5
> audio tag. Tested in IE7 and IE8 .. I'm embedding an mp3 for those browsers

And why would you want to do that? IE has supported audio since
version 4. Certainly all of the versions that do not support HTML5
audio do support the BGSOUND element.

>
> first we test for html5 audio support
> var test_audio= document.createElement("audio")
>
> then we create a boolean to use as a flag whenever we need to test
> var test_audio_true = (test_audio.play)? true : false;

Don't test host methods by boolean type conversion. Use the typeof
operator. And if you are going to type convert, just set the variable
to !!test_audio.play.

>
> modified from here:http://www.javascriptkit.com/javatutors/createelementcheck.shtml
>
> .. and here is one if the tests:
> if(test_audio_true){
>     document.getElementById("click1snd").play();
>     }else{
>     document.getElementById("soundsa").innerHTML = "<embed
> src=\"click1.mp3\" hidden=\"true\" autoplay=\"true\" />";
>     }

Been a long time, but ISTM the last thing legacy IE wants to see is an
EMBED. In any event, those browsers do not need EMBED or OBJECT
elements to play audio. See the audio module in My Library. I've been
meaning to check in playAudio and playAudioLoop functions to Jessie as
well. It's always the same pattern: try HTML5 and then see if you can
create a working BGSOUND (those have their own special properties as
well). The suggestion to put the AUDIO element in the markup is a good
one. If possible, let the browser figure out which type will work.
Though I did have an issue with the VIDEO element in that area IIRC.
For a reason that escapes me, I had to use canPlayType on load and
replace the static element in some cases (old Android browsers I
think). That's what happens when you try to use newly introduced
objects before the browser developers get them stable.

[toc] | [prev] | [next] | [standalone]

#17978

On Jan 5, 8:54 pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Dec 22 2012, 6:16 pm, 123Jim <jnkjnjn...@uhnuhnunuhnuy.invalid>
> wrote:
>
>
>
>
>
>
>
>
>
> > On 22/12/2012 16:33, 123Jim wrote:
>
> > > On 22/12/2012 13:31, 123Jim wrote:
> > >> On 22/12/2012 00:46, Andrew Poulos wrote:
> > >>> On 22/12/2012 10:41 AM, 123Jim wrote:
> > >>>> Q: Is the html5 Audio code below cross browser and robust? It occurs to
> > >>>> me that if the browser does not like 'canplaytype' but nevertheless
> > >>>> needs ogg, not MP3 then it will fail (I've tested in the newest
> > >>>> versions
> > >>>> of IE, Firefox, Opera and Chrome with no problems)
>
> > >>>> var audio1 = new Audio();
>
> > >>>> if (!!audio1.canPlayType && audio1.canPlayType('audio/ogg;
> > >>>> codecs="vorbis"') != "") {
> > >>>>      //alert('ogg sounds');
> > >>>>      var    click1snd = new Audio("click1.ogg");
> > >>>>      var    incorrectsnd = new Audio("incorrect.ogg");
> > >>>>      var    correctsnd = new Audio("correct.ogg");
> > >>>> }else{
> > >>>>      //alert('mp3 sounds');
> > >>>>      var    click1snd = new Audio("click1.mp3");
> > >>>>      var    incorrectsnd = new Audio("incorrect.mp3");
> > >>>>      var    correctsnd = new Audio("correct.mp3");
> > >>>> }
>
> > >>>>      click1snd.play();
>
> > >>> Wouldn't it be better to add an audio element
>
> > >>> <audio id="click1">
> > >>>    <source src="click1.ogg" type="audio/ogg">
> > >>>    <source src="click1.mp3" type="audio/mp3">
> > >>> </audio>
>
> > >>> to the page and then call
>
> > >>> document.getElementById("click1").play();
>
> > >>> to the page and let browsers sort out which one it can play?
>
> > >>> Also what are you going to do about browsers that don't support the
> > >>> audio element?
>
> > >>> Andrew Poulos
>
> > >> Thanks Andrew, That seem like a better way to add audio to my webpage.
>
> > >> For browsers that don't support the Audio element this looks like the
> > >> way to go:
> > >>http://www.brandaiddesignco.com/blog/html5-audio-made-easy/104/
>
> Browsers that don't support the AUDIO element will render the fallback
> content.
>
>
>
> > >> So the audio element now looks like this:
> > >> <audio id="click1snd">
> > >>      <source src="click1.ogg" type="audio/ogg">
> > >>      <source src="click1.mp3" type="audio/mp3">
> > >>      <embed src="click1.mp3" hidden="true" />
> > >>   </audio>
>

I should add that you can't put the BGSOUND in here as it will play
immediately. You could give it a volume of 0, but IIRC that causes
other issues (it's the way that My Library tries to preload audio in
IE). The other issue is that BGSOUND is supposed to go in the HEAD,
but I know from experience that doesn't matter (the book is closed on
that stuff now).

[toc] | [prev] | [next] | [standalone]

#17979

On Jan 5, 8:54 pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Dec 22 2012, 6:16 pm, 123Jim <jnkjnjn...@uhnuhnunuhnuy.invalid>
> wrote:
>
>
>
>
>
>
>
>
>
> > On 22/12/2012 16:33, 123Jim wrote:
>
> > > On 22/12/2012 13:31, 123Jim wrote:
> > >> On 22/12/2012 00:46, Andrew Poulos wrote:
> > >>> On 22/12/2012 10:41 AM, 123Jim wrote:
> > >>>> Q: Is the html5 Audio code below cross browser and robust? It occurs to
> > >>>> me that if the browser does not like 'canplaytype' but nevertheless
> > >>>> needs ogg, not MP3 then it will fail (I've tested in the newest
> > >>>> versions
> > >>>> of IE, Firefox, Opera and Chrome with no problems)
>
> > >>>> var audio1 = new Audio();
>
> > >>>> if (!!audio1.canPlayType && audio1.canPlayType('audio/ogg;
> > >>>> codecs="vorbis"') != "") {
> > >>>>      //alert('ogg sounds');
> > >>>>      var    click1snd = new Audio("click1.ogg");
> > >>>>      var    incorrectsnd = new Audio("incorrect.ogg");
> > >>>>      var    correctsnd = new Audio("correct.ogg");
> > >>>> }else{
> > >>>>      //alert('mp3 sounds');
> > >>>>      var    click1snd = new Audio("click1.mp3");
> > >>>>      var    incorrectsnd = new Audio("incorrect.mp3");
> > >>>>      var    correctsnd = new Audio("correct.mp3");
> > >>>> }
>
> > >>>>      click1snd.play();
>
> > >>> Wouldn't it be better to add an audio element
>
> > >>> <audio id="click1">
> > >>>    <source src="click1.ogg" type="audio/ogg">
> > >>>    <source src="click1.mp3" type="audio/mp3">
> > >>> </audio>
>
> > >>> to the page and then call
>
> > >>> document.getElementById("click1").play();
>
> > >>> to the page and let browsers sort out which one it can play?
>
> > >>> Also what are you going to do about browsers that don't support the
> > >>> audio element?
>
> > >>> Andrew Poulos
>
> > >> Thanks Andrew, That seem like a better way to add audio to my webpage.
>
> > >> For browsers that don't support the Audio element this looks like the
> > >> way to go:
> > >>http://www.brandaiddesignco.com/blog/html5-audio-made-easy/104/
>
> Browsers that don't support the AUDIO element will render the fallback
> content.
>
>
>
> > >> So the audio element now looks like this:
> > >> <audio id="click1snd">
> > >>      <source src="click1.ogg" type="audio/ogg">
> > >>      <source src="click1.mp3" type="audio/mp3">
> > >>      <embed src="click1.mp3" hidden="true" />
> > >>   </audio>
>
> > >> I'll need to dig out an old XP computer to test it though.
>
> > > Scratch that, I forgot about the Developer tools in IE9 which does let
> > > me run the code in IE8.
>
> Scratch that. IE9 compatibility modes aren't close to perfect replicas
> of the old versions. IETester doesn't work well on Windows 7 either,
> so you have to have at least one XP box if you are unsure about
> anything.
>
> > > I find that IE8 objects to the play() method here:
> > > document.getElementById("click1").play(); and therefore wont play the
> > > sound file. .. currently looking for a solution.
>
> > OK -- here is my solution for browsers that don't support the html5
> > audio tag. Tested in IE7 and IE8 .. I'm embedding an mp3 for those browsers
>
> And why would you want to do that? IE has supported audio since
> version 4. Certainly all of the versions that do not support HTML5
> audio do support the BGSOUND element.
>

Sorry, since version 2 (circa 1995 IIRC). I still remember the demo
that looped a bird chirping in the background (which had a tiled
graphic!) while something or other spun around (an animated GIF). :)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web