h5之控制音乐播放

最新推荐文章于 2024-09-13 10:11:04 发布

L824627453

最新推荐文章于 2024-09-13 10:11:04 发布

阅读量1.7k

点赞数 1

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/L824627453/article/details/120585823

版权

这篇博客介绍了如何在网页中插入并控制音频播放。通过HTML的<audio>标签，可以设置autoplay自动播放、loop循环播放以及controls显示播放控件。同时，通过JavaScript实现了点击切换音乐播放和暂停的功能，以及更改图标来表示音乐状态。此外，还提供了预加载音频的选项以及在微信环境下自动播放的处理方式。

摘要由CSDN通过智能技术生成

//在网页中插入播放音频
<audio src="img/bgm.mp3" class="mp3" autoplay="autoplay" loop="loop" id="audio_mp3"></audio>
1、使用autoplay="autoplay"，则背景音乐将在音网页打开后就自动马上播放。

2、使用controls="controls"，则为了在页面内显示显示控件，如播放按钮。

3、使用"loop="loop"，则是为了是背景音乐重复播放。

4、使用preload="auto"，则音频在页面加载的同时进行加载，并预备播放。

5、使用src=""，即是在""内加入背景音乐的保存路径，如：src="web网页制作\03.mp3"。

注：若是想播放按钮隐藏，则使用以下语句：

直接使用css 的display控制audio标签的显示：

display: none;

}

//控制音乐播放

       <div class="music rotate">
           <audio src="img/bgm.mp3" class="mp3" autoplay="autoplay" loop="loop" id="audio_mp3"></audio>
       </div>

       <script type="text/javascript">
           //控制音乐播放、暂停
           $(".music").click(function(){
                   if($(".music").is($(".rotate"))){
                       $(".music").css({background:"url(img/musicClose.png) no-repeat center 100%/100%"});
                       $(".music").removeClass("rotate");
                       $("#audio_mp3").trigger('pause');
                   }
                   else{
                       $(".music").css({background:"url(img/musicOpen.png) no-repeat center 100%/100%"});
                       $(".music").addClass("rotate");
                       $("#audio_mp3").trigger('play');
                   }
               });
       </script>

//写js文件，控制播放音乐首先得打印
$(document).ready(function(){
var m = $("<p class='music rotate'></p>") //引号一定要外双里单，设置变量
$(document.body).append(m) //添加打印变量

//这里写你要的效果
})

//另外一种写法不需要动画，点击更换图标

.a-03 {background: url(../img/icon_sound.png) no-repeat center center; background-size:0.37rem 0.37rem;width: .37rem;height: .37rem;}
.a-03.close { background: url(../img/icon_sound_close.png) no-repeat center center; background-size:0.37rem 0.37rem;width: .37rem;height: .37rem;}

//js

var bgmusic=function(arguments){
//   音乐初始化
   console.log("bgmusic")

   var audio_dom=$("<audio class='mp3' src='sound/bgm.mp3' autoplay='autoplay' loop='loop' id='audio_mp3'></audio>")

   $(document.body).append(audio_dom);

   var mmp3=document.querySelector("#audio_mp3")
   document.addEventListener("WeixinJSBridgeReady", function () {
   mmp3.play();
   }, false);

}

//音乐
       $(".a-03").click();
       var isMusic=true;
       $("#music").click(function(){
           console.log("music");
           if(isMusic==true)
           {
               isMusic=false;
               $("#music").addClass("close");
               $("#audio_mp3").trigger('pause');
           }
           else
           {
               isMusic=true;
               $("#music").removeClass("close");
               $("#audio_mp3").trigger('play');
           }
       })