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

Groups > comp.lang.javascript > #17801

Re: html5 Audio

Show all headers | View raw

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. ....

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

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

csiph-web