html5標記播放音樂的方法是什么

本篇內容主要講解“html5標記播放音樂的方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html5標記播放音樂的方法是什么”吧!

html5用“<audio>”標記播放音樂。audio標簽用于在網頁文檔中表示音頻內容，利用該標簽，開發者可以在網站上插入一個音樂播放控件；語法“ <audio src="音頻文件地址"></audio>”。

本教程操作環境：windows7系統、HTML5版、Dell G3電腦。

html5用“<audio>”標記播放音樂。

<audio>標簽：用于在文檔中表示音頻內容。利用它，你可以在你的個人網站上插入一個音樂播放器，放一首你喜歡的歌。

<audio src="music.mp3"></audio>

用法很簡單，跟<video>標簽一樣，屬性src指定音頻文件地址。

如果你僅僅這樣寫，頁面上不會看到有明顯的東西，<audio>標簽默認是隱藏的。

對于不支持<audio>標簽的瀏覽器，會把標簽的文本內容顯示出來。

    <audio src="music.mp3">
        別試了，是你的瀏覽器渣渣
    </audio>

為了方便我們對音頻文件進行控制，操作它的進度、播放暫停、音量等等，我們可以給它添加controls屬性：

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

用法跟<video>標簽一樣。對于加上了controls屬性， 不同的瀏覽器會展示不同樣式的控制面板。

( chrome瀏覽器的音頻控制面板 )

( firefox瀏覽器的音頻控制面板 )

( IE瀏覽器的音頻控制面板 )

哪個好看就見仁見智了~~

跟<video>標簽一樣，<audio>標簽也有一個字標簽：<source>。

它們的作用和用法都一樣，就是用來引入多個音頻，瀏覽器會選擇一個支持的音頻格式進行加載，對于不支持<audio>標簽的瀏覽器，<source>元素也可以作為瀏覽器不識別的內容加入到文檔中。

    <audio>
        <source src="music.mp3">
        <source src="music.ogg">
        <source src="music.wav">
    </audio>

注：主流的音頻文件格式有：mp3、wav、ogg。不同的瀏覽器對三種格式支持程度不一樣。其中mp3格式支持度最好。

autoplay屬性：加載完成后，自動播放。也非常簡單、使用。

 <audio src="m.mp3" autoplay></audio>

loop屬性：顧名思義，循環播放。

<audio src="m.mp3" loop></audio>

preload屬性：用來控制音頻在什么時候進行加載。

 <audio src="m.mp3" preload="auto"></audio>

對應的值有3種：

• none：默認不加載，等有需要的時候再加載。

• metadata：元數據，默認不加載，但是可以提取該音頻的元數據信息。

• auto：自動加載，網頁加載完就加載整個音頻。

muted屬性：靜音效果。

<audio src="m.mp3" muted></audio>

加了muted屬性，音頻即使在播放的時候，也是沒有聲音，除非用戶手動調整控制面板的音量。

到此，相信大家對“html5標記播放音樂的方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！