HTML中如何为网页添加背景音乐

Posted 2021-06-11 周末简设

Hi，小伙伴们，大家好，是不是还有许多小伙伴在问html中如何为网页添加背景音乐，今天就来出一篇教程教给大家，那就废话不多说，盘它。

其实很简单，先准备好你的mp3音乐文件，这里我随便准备一个yinyue.mp3作为示例，那么怎么嵌入到网页呢？敲黑板了，注意，这是关键所在，参考以下关键代码

<div id="music"> <audio id="myAudio" autoplay="autoplay"> <source src="music/yinyue.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <audio src="music/yinyue.mp3" controls="controls" autoplay hidden="true" style="display:none;"/></div>

直接拷贝以上代码放置在body标签中（body标签中随便哪里），并且替换yinyue.mp3为你的mp3文件即可，是不是很简单，备注一下，你的浏览器必须支持HTML5，否则不起作用的，当然你也不必要担心，现在的浏览器都支持的，除非你用的是老古董。。。

好了，下面来个升级版的，先看视频效果

Play

怎么才能实现视频上的效果呢？

第一步：在head标签中加上jQuery文件

<script src="js/jquery-1.11.3.min.js"></script>

第二步：在body标签中上关键代码，之前加过的就不用加了

<div id="music"> <audio id="myAudio" autoplay="autoplay"> <source src="music/yinyue.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <audio src="music/yinyue.mp3" controls="controls" autoplay hidden="true" style="display:none;"/></div>

第三步：在body标签的最后加上以下脚本代码

<script> $(document).ready(function() {  $(".xwcms").removeClass("animation"); $(".xwcms").on("click", function() { $(".xwcms").addClass("animation"); $(this).toggleClass("pause"); var audio = $("#music audio")[0]; if (audio.paused) { $(".xwcms").addClass("animation"); audio.play(); } else { $(".xwcms").removeClass("animation"); audio.pause(); } audio.addEventListener('ended', function () {  $(".xwcms").removeClass("animation"); }, false); }); });</script>

通过以上三步即可实现视频中的播放和暂停音乐的功能，喜欢的同学就赶紧试试吧

最后还有福利，附上完整的示例代码，关注 youtiyblog 微信公众号，回复 初恋 即可获得百度云下载地址