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');//得到繪圖環(huán)境  參數(shù)為繪圖環(huán)境的類型

        //檢查音頻支持
        var audiotest = document.createElement('audio');
        var mp3Support,oggSupport,wavSupport;
        if(audiotest.canPlayType){
            /*
                 MP3格式：字符串a(chǎn)udio/mpeg;支持的瀏覽器：IE9+、Chrome

             　　Vorbis格式：字符串a(chǎn)udio/ogg，codecs=”vorbis”;支持的瀏覽器：Firefox 3.5+、Chrome、Opera 10.5+

             　　WAV格式：字符串a(chǎn)udio/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){
            //動態(tài)加載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使用大全
文章路徑：http://www.aaarwkj.com/article46/ispghg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、自適應網(wǎng)站、小程序開發(fā)、營銷型網(wǎng)站建設、網(wǎng)站排名、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

html5中audio使用大全