【重構前端知識體系之HTML】HTML5給網頁音訊帶來的變化

歸子莫發表於2022-01-24
前端HTML網頁音訊

【重構前端知識體系之HTML】HTML5給網頁音訊帶來的變化

引言

音樂播放，相信大家都很熟悉，但是早在之前的音樂播放之前，你的瀏覽器會問你，是否下載flash外掛。然而現在，估計一些年輕的開發者都不用瞭解flash是啥了。因為HTML5來了，它改變了這一切。

HTML5音訊的播放方式

是的，HTML5帶來了不止一種能夠播放音訊的方式。

使用外掛

瀏覽器外掛是一種擴充套件瀏覽器標準功能的小型計算機程式。

外掛可以使用 object 標籤 或者 embed 標籤新增在頁面上。

embed方式

embed定義一個外部的容器，用來裝放MP3等音訊檔案。

例如

<embed height="50" width="100" src="demo.mp3">

效果

image-20220120231414621

缺陷

  • embed標籤在 HTML 4 中是無效的，因為它是HTML5新出的標籤
  • 依賴瀏覽器的支援
  • 依賴外掛的安裝

obejct方式

obejct也可以定義一個外部的容器，用來裝放MP3等音訊檔案。

例如

<object height="50" width="100" src="demo.mp3"></object>

效果

image-20220120231414621

缺陷

  • 依賴瀏覽器的支援
  • 依賴外掛的安裝

audio方式

audio標籤是HTML5專門為音訊出的一個標籤。推薦使用！

<audio src="horse.mp3" controls></audio>

效果

image-20220120231347590

缺陷

  • embed標籤在 HTML 4 中是無效的，因為它是HTML5新出的標籤
  • 依賴瀏覽器的支援

最好的解決方案

上面講了三種使用音訊的方式，可以將一些結合起來使用。

示例

<audio controls height="100" width="100">
  <source src="demo.mp3" type="audio/mpeg">
  <source src="demo.ogg" type="audio/ogg">
  <embed height="50" width="100" src="demo.mp3">
</audio>

講解

看到以上用到了三個標籤，這樣做的好處是audio會嘗試用mp3 或 ogg 來播放音訊，如果播放失敗了，會回退到embed。

效果

顯示的效果基本與audio一致！

image-20220120231347590

audio標籤

audio的屬性

一些常用的audio屬性，全域性屬性在這裡就沒有列出來來了。更多請到w3school查閱。

屬性描述
autoplay設定或返回是否在載入完成後隨即播放音訊/視訊
controls設定或返回音訊/視訊是否顯示控制元件（比如播放/暫停等）
loop設定或返回音訊/視訊是否應在結束時重新播放
muted設定或返回音訊/視訊是否靜音
preload設定或返回音訊/視訊是否應該在頁面載入後進行載入
src設定或返回音訊/視訊元素的當前來源

audio的事件

事件這是我們用來跟音訊發生互動的重要武器。

同樣的只給出部分事件，更多請到w3school查閱。

事件描述
pause當音訊/視訊已暫停時
play當音訊/視訊已開始或不再暫停時
playing當音訊/視訊在已因緩衝而暫停或停止後已就緒時
canplay當瀏覽器可以播放音訊/視訊時
timeupdate當目前的播放位置已更改時

來一個音訊播放器的案例

講了那麼多，不就是等一個案例嗎，來！

碼上！

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" />
    <title>audio音訊demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: "微軟雅黑"
        }

        h1 {
            width: 100%;
            font-size: 1.5em;
            text-align: center;
            line-height: 3em;
            color: #33942a;
        }

        #audio {
            width: 100%;
        }

        .control-body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #control {
            width: 150px;
            height: 150px;
            border-radius: 200px;
            border: none;
            box-shadow: #888 0 0 8px;
        }

       
    </style>

</head>

<body>
    <script>

        function play() {
            let audio = document.getElementById("audio");
            if (audio.paused) {
                audio.pasue();
            } else {
                audio.play();
            }
        }

    </script>

    <h1>audio音訊播放demo</h1>

    <div class="control-body">
        <button class="control" id="control" onclick="play()">開始</button>
    </div>

    <audio id="audio" src="http://96.ierge.cn/15/235/471737.mp3"></audio>

    

</body>

</html>

總結

音訊的確在現在的網頁中用的十分平常了，使用的的方式也發生了很大的改變。後續寫一個關於音訊的demo案例！

重構前端知識體系，你要一起嗎？

部落格說明與致謝

文章所涉及的部分資料來自網際網路整理，其中包含自己個人的總結和看法，分享的目的在於共建社群和鞏固自己。

引用的資料如有侵權，請聯絡本人刪除！

感謝萬能的網路，W3C，菜鳥教程等！

感謝勤勞的自己，個人部落格，GitHub學習，GitHub

公眾號【歸子莫】，小程式【子莫說】

如果你感覺對你有幫助的話，不妨給我點贊鼓勵一下，好文記得收藏喲！關注我一起成長！

所屬專欄：重構前端知識體系（HTML）

幸好我在，感謝你來！

相關文章