H5网页实现打开页面自动播放背景音乐,以及点击关闭背景音乐

2021-09-10   阅读:7681   分类:前端    标签: html

相信大家都见过一些H5邀请函,打开之后会自动播放音乐,屏幕有上角也会自动360度旋转图标,以下是简单的案例,大家可以参考。

1、html部分代码:放置音乐、放置旋转按钮

<div style="display: none;">
  <audio id="music1" src="music/EasyBreeze.mp3" controls>
    <source src="music/EasyBreeze.mp3" type="audio/mpeg" />
  </audio>
</div>
<a href="javascript:;" class="closemusic rotates"></a>
<style>
  .closemusic{
    display: block;
    width: 2rem; height: 2rem; background: url(images/bgmBtn-fbd2dc.svg) no-repeat; background-size: 100% 100%; position: fixed; right: 0.8rem; top:0.8rem;
    z-index: 11;
  }
  .closemusic.rotates{
    animation: 2s rotates linear infinite
  }
  @keyframes rotates {
    0%{}
    100%{transform:rotate(360deg);}
  }
</style>

2、按钮点击事件:实现点击关闭和开启音乐

<script>
$(".closemusic").click(function(){ 
  if($(this).hasClass('rotates')){
    $(this).removeClass('rotates')
     document.getElementById('music1').pause();
  }else{
    $(this).addClass('rotates')
     document.getElementById('music1').play();
  }
   
}) 
</script>

3、效果展示:

4、关于ios微信不自动播放音乐可以参考这边文章:https://www.tpxhm.com/fdetail/818.html

【腾讯云】 爆款2核2G3M云服务器首年 61元,2核2G4M云服务器新老同享 99元/年,续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/817.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×