html5中audio使用大全

<!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 onload="pageLoaded();">
<canvas width="1200" height="480" id="testcanvas" >
</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>

分享题目:html5中audio使用大全
文章路径:https://www.cdcxhl.com/article46/ispghg.html

成都网站建设公司_创新互联,为您提供虚拟主机自适应网站小程序开发营销型网站建设网站排名企业建站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

小程序开发