（教程）mp3音乐文件怎么嵌入到网页呢？教程

其实很简单。 首先准备你的mp3音乐文件。 这里我准备一个.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标签中的任何位置），并将.mp3替换为您的mp3文件。 是不是很简单呢？ 请注意，您的浏览器必须支持HTML5，否则将无法工作。 当然你不用担心，所有现代浏览器都支持它，除非你用的是老古董。 。 。

好了，这里是升级版，我们先来看看视频效果。

怎样才能达到视频上的效果呢？

第一步：将文件添加到head标签中

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

步骤2：在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>

通过以上三个步骤，就可以实现视频中音乐的播放和暂停的功能。 如果您喜欢，请立即尝试。

最后，还有好处。 附上完整的示例代码。 关注微信公众号并回复初恋即可获取百度云下载地址。