方式一：

<audio src=”static/sound/happyBirthday.mp3″ autoplay=”autoplay” preload=”auto” controls=”controls”></audio>

或

<audio autoplay=……><source src=”static/sound/happyBirthday.mp3″></audio>

autoplay自動播放，loop循環播放，preload預下載，controls顯示播放器，不寫controls標簽會隱藏播放器。

audio 僅支持mp3，ogg，wav。

方式二：

<iframe frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ width=298 height=52 src=”static/sound/happyBirthday.mp3″ hidden=”true”></iframe>

frameborder播放器邊框，hidden隱藏播放器。

方式三，顯示播放器：

<video controls=”controls” autoplay=”autoplay” name=”media”><source src=”音樂” type=”audio/mpeg”></video>

source 標簽可以放在video 標簽里面，即<video source src=”音樂” ></video>

video僅支持MP4、WebM、Ogg。

方式四：

<embed type=”video/wma” src=”static/sound/happyBirthday.wma” autoplay=”autoplay” loop=”true” hidden=”false”></embed>

注意：

• embed 的type要跟后面的源文件格式匹配。
• embed支持多種多媒體格式，Midi、Wav、AIFF、AU、MP3、WMA等等，
• embed是借助flash插件進行播放的，結合的是最新adobe flash插件，
• <embed> 標簽是 HTML 5 中的新標簽。
• <embed> 后面沒有/結尾。

方式五（沒試成功）：

<bgsound src=”static/sound/happyBirthday.mp3″ loop=-1/>

loop=2表示循環兩次，loop=-1表示無限循環，bgsound 很多瀏覽器不兼容。

注意：

采用ogg文件比mp3加載速度快很多

例如<audio src=”static/sound/happyBirthday.ogg” autoplay=”autoplay” preload=”auto”></audio>

src路徑引用時要截取到webapp后

絕對路徑是/wxapp/src/main/webapp/static/sound/happyBirthday.mp3（/wxapp是project名）

src=”static/sound/happyBirthday.mp3″

總結

以上是生活随笔為你收集整理的html5添加网页背景音乐完整代码_网页添加音乐播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。