Home/ Questions/Q 7689049
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T20:04:27+00:00

I’ve made a website, to test the html5 audio. Unfortunately some browser doesn’t support

  • 0

I’ve made a website, to test the html5 audio. Unfortunately some browser doesn’t support it. How to use a flash backend? I haven’t found anything useable. The flash backend examples on the web use the DOM element, not the new Audio(). I don’t want to use JQuery for this little experiment.

My code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Audio test</title>
<script type="text/javascript">

//testbegin
var audioTagSupport = !!(document.createElement('audio').canPlayType);

try {
    myAudio = new Audio(""); 
    audioObjSupport = !!(myAudio.canPlayType);
    basicAudioSupport = !!(!audioObjSupport ? myAudio.play : false);
} catch (e) {
    audioObjSupport = false;
    basicAudioSupport = false;
}

if (myAudio.canPlayType) {
    canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) &&
 ("" != myAudio.canPlayType("audio/ogg"));

    canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) &&
 ("" != myAudio.canPlayType("audio/mpeg"));
}
//testend


if(canPlayMp3) {
var audio = new Audio("http://www.w3schools.com/html5/song.mp3");
} else if(canPlayOgg) {
var audio = new Audio("http://www.w3schools.com/html5/song.ogg");
} else {
//flash...
}

audio.addEventListener('ended', function() { 
   document.getElementById('log').innerHTML+= 'ended<br/>';
}, false);

audio.addEventListener('canplay', function() {
   document.getElementById('ido').innerHTML = '0 / ' + Math.floor(audio.duration);
   document.getElementById('log').innerHTML+= 'can start<br/>';
}, false);

audio.addEventListener('canplaythrough', function() { 
   document.getElementById('log').innerHTML+= 'loaded<br/>';
}, false);

audio.addEventListener('timeupdate', function() { 
   document.getElementById('timme').innerHTML = Math.floor(audio.currentTime) + ' / ' + Math.floor(audio.duration);
   document.getElementById('buff').innerHTML = audio.buffered.end(audio.buffered.length-1);
}, false);

</script>
</head>
<body>
<a href="#" onclick="audio.play();">start</a><br/>
<a href="#" onclick="audio.pause();">pause</a><br/>
<a href="#" onclick="audio.volume=prompt('from 0 to 1',0.7)">volume</a><br/>
<a href="#" onclick="audio.currentTime = 3;">jump</a><br/>
<a href="#" onclick="audio.playbackRate=prompt('from 0 to 1',0.7)">speed</a><br/>
<p id="timme">?/?</p>
<p id="buff">?</p>
<div id="log">...<br/></div>
</body>
</html>

thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    MediaElement.js implements the HTML5 media element APIs with only some small changes needed for initialization. You just have to use new MediaElement(document.createElementNS("http://www.w3.org/1999/xhtml", "audio")) instead of new Audio.

    Also, you shouldn’t be using code like this:

    if(canPlayMp3) {
var audio = new Audio("http://www.w3schools.com/html5/song.mp3");
} else if(canPlayOgg) {
var audio = new Audio("http://www.w3schools.com/html5/song.ogg");
} else {
//flash...
}

    Just use <source> elements in one <audio> element.

    var
  audio = new Audio
, mp3 = audio.appendChild(document.createElementNS(audio.namespaceURI, "source"))
, ogg = audio.appendChild(mp3.cloneNode())
;

mp3.type = "audio/mpeg";
mp3.src = "http://www.w3schools.com/html5/song.mp3";

ogg.type = "audio/ogg;codecs='vorbis'";
ogg.src = "http://www.w3schools.com/html5/song.mp3";
    • 0