技术宅

请输入关键字词
当前位置：首页 > 网站教程 > 代码学习

代码学习

H5背景音乐播放暂停加图标自动旋转功能

时间：10-08 作者：
H5背景音乐播放暂停加图标自动旋转功能，支持微信内自动播放代码实例!实现html页面背景音乐自动播放，右上角增加播放图标状态显示，支持暂停，使用最新微信JDK支持微信内打开自动播
H5背景音乐播放暂停加图标自动旋转功能，支持微信内自动播放代码实例!实现html页面背景音乐自动播放，右上角增加播放图标状态显示，支持暂停，使用最新微信JDK支持微信内打开自动播放功能。自行替换js跟MP3图标吧！
代码如下： 

 
  1. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  2. <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  3. <style>
  4. * { margin: 0; padding: 0; }
  5. input, button, select, textarea, div, p, img { outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; }
  6. h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }
  7. body, html { height: 100%; width: 100%; }
  8. li { list-style: none; }
  9. img { vertical-align: top; height: auto; }
  10. body a { outline: none; blr: expression(this.onFocus=this.blur()); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  11. html { -webkit-text-size-adjust: none; font-size: 62.5%; }
  12. body { font-size: 1.2rem; background-color: #000; overflow: hidden; font-family: PingFangSC-Regular, sans-serif; }
  13. @-webkit-keyframes reverseRotataZ {
  14. 0%{
  15. -webkit-transform: rotateZ(0deg);
  16. }
  17. 100%{
  18. -webkit-transform: rotateZ(-360deg);
  19. }
  20. }
  21. @-webkit-keyframes rotataZ{
  22. 0% {
  23. -webkit-transform: rotateZ(0deg);
  24. }
  25. 100% {
  26. -webkit-transform: rotateZ(360deg);
  27. }
  28. }
  29. #musicControl {
  30. position:fixed;
  31. right:10px;
  32. top:18px;
  33. margin-top:0;
  34. display:inline-block;
  35. z-index:99999999
  36. }
  37. #musicControl a {
  38. display:inline-block;
  39. width: 25px;
  40. height: 25px;
  41. overflow:hidden;
  42. background:url('http://f.ps288.com/f/2022/music.svg') no-repeat;
  43. background-size:100%;
  44. }
  45. #musicControl a audio{
  46. width:100%;
  47. height:56px;
  48. }
  49. #musicControl a.stop {
  50. background-position:left bottom;
  51. }
  52. #musicControl a.on {
  53. background-position:0px 1px;
  54. -webkit-animation: reverseRotataZ 1.2s linear infinite;
  55. }
  56. #music_play_filter{
  57. width:100%;
  58. height:100%;
  59. overflow:hidden;
  60. position:fixed;
  61. top:0;
  62. left:0;
  63. z-index:99999998;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <span id="musicControl">
  69. <a id="mc_play" class="on">
  70. <audio id="musicfx" loop="loop" autoplay="autoplay">
  71. <source src="https://cy-sycdn.kuwo.cn/bc252bc2be7d932fb1855feef9b1e058/63306219/resource/n2/41/24/2477968581.mp3" type="audio/mpeg" id="hhh">
  72. </audio>
  73. </a>
  74. </span>
  75. <script>
  76. $('#mc_play').click(function () {
  77. var music = document.getElementById('musicfx');
  78. if (music.paused) {
  79. music.play();
  80. $('#mc_play').attr('class', 'on');
  81. } else {
  82. music.pause();
  83. $('#mc_play').attr('class', 'stop');
  84. }
  85. })
  86. var ua = navigator.userAgent.toLowerCase();
  87. if(ua.match(/MicroMessenger/i)=="micromessenger") {
  88. document.addEventListener('DOMContentLoaded', function () {
  89. function audioAutoPlay() {
  90. var audio_ = document.getElementById('musicfx')
  91. document.addEventListener("WeixinJSBridgeReady", function () {
  92. audio_.play()
  93. }, false)
  94. }
  95. audioAutoPlay()
  96. });//123
  97. }
  98. </script>

相关文章