HTML5 音頻 audio - chengxs－IT工程師數位筆記本

文章出處

HTML5 提供了播放音頻的標準。

一、Web 上的音頻

直到現在，仍然不存在一項旨在網頁上播放音頻的標準。

今天，大多數音頻是通過插件（比如 Flash）來播放的。然而，并非所有瀏覽器都擁有同樣的插件。

HTML5 規定了一種通過 audio 元素來包含音頻的標準方法。

audio 元素能夠播放聲音文件或者音頻流。

二、使用audio標簽

<audio src="song.ogg" controls="controls">
</audio>

control 屬性供添加播放、暫停和音量控件。

<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

    <body>

        <div style="text-align:center;">
            <video id="video1" width="420" style="margin-top:55px;">
                <source src="img/mov_bbb.mp4" type="video/mp4" />
                <source src="img/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video.
            </video>
            <br />
            <button onclick="playPause()">播放/暫停</button>
            <button onclick="makeBig()">大</button>
            <button onclick="makeNormal()">中</button>
            <button onclick="makeSmall()">小</button>
            <br/>
            <br/>
            <audio controls="controls">
                <source src="img/qiuyinong.mp3" type="audio/mpeg">
                Your browser does not support the audio tag.
            </audio>
        </div>

        <script type="text/javascript">
            var myVideo = document.getElementById("video1");

            function playPause() {
                if(myVideo.paused)
                    myVideo.play();
                else
                    myVideo.pause();
            }

            function makeBig() {
                myVideo.width = 560;
            }

            function makeSmall() {
                myVideo.width = 320;
            }

            function makeNormal() {
                myVideo.width = 420;
            }
        </script>

    </body>

</html>