<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
</head>
<script type="text/javascript" charset="utf-8">
function pageLoaded(){
var canvas = document.getElementById('testcanvas');//得到画布
var context = canvas.getContext('2d');//得到绘图环境 参数为绘图环境的类型
//检查音频支持
var audiotest = document.createElement('audio');
var mp3Support,oggSupport,wavSupport;
if(audiotest.canPlayType){
/*
MP3格式:字符串audio/mpeg;支持的浏览器:IE9+、Chrome
Vorbis格式:字符串audio/ogg,codecs=”vorbis”;支持的浏览器:Firefox 3.5+、Chrome、Opera 10.5+
WAV格式:字符串audio/wav,codecs=”1”;支持的浏览器:Firefox 3.5+、Opera 10.5+、Chrome
*/
mp3Support = "" != audiotest.canPlayType('audio/mpeg');
oggSupport = "" != audiotest.canPlayType('audio/ogg; codecs = "vorbis"');
wavSupport = "" != audiotest.canPlayType('audio/wav,codecs="1"');
} else{
mp3Support = false;
oggSupport = false;
wavSupport = false;
}
var soundFileExtn = oggSupport?'.ogg':mp3Support?'.mp3':wavSupport?'.wav':undefined;
if(soundFileExtn){
//动态加载audio文件
var audio = new Audio();
//等待音频文件加载完成 然后再播放
audio.addEventListener('canplaythrough',function(){
audio.play();
});
audio.src="/testmusic/8466/8466"+soundFileExtn;
}
}
</script>
<body οnlοad="pageLoaded();">
<canvas width="1200" height="480" id="testcanvas" style="border: black 1px solid">
</canvas>
<audio src="/testmusic/8466/8466.wav" controls = "controls" >
</audio>
<audio src="/testmusic/8466/8466.mp3" controls="controls2">
</audio>
<audio controls="controls3">
<!--浏览器会选择第一个支持的格式
音频格式 MINE-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
-->
<source src="/testmusic/8466/8466.wav" type="audio/wav">
<source src="/testmusic/8466/8466.mp3" type="audio/mpeg">
</audio>
</body>
</html>
转载于:https://blog.51cto.com/quietnight/1912797