代码实现网站音乐播放

本文预计阅读时间 5 分钟
插件太多,必定会影响网站的速度。七墨昨晚在看一个网站的时候,发现了一个音乐播放的按钮,音乐起初是自动播放,然后点一下按钮,音乐就暂停。所以立马给扒了下来,下面简单介绍下实现过程。

1.添加功能代码

将以下代码放到footer.php</body>上面即可:

  1. <!--音乐,请记住本站域名:qimok.cn-->
  2. <section class="u-audio hidden" data-src="http://img.qimok.cn/music/Xun%28%E6%98%93%E7%A1%95%E6%88%90%29%20-%20%E6%88%91%E6%98%AF%E4%BD%A0%E7%9A%84%E5%BD%B1%E5%AD%90.mp3"></section>
  3. <div class="btnAudio" id="btnAudio"></div>
  4. <script>
  5. var bg_audio_val = true;
  6. var bg_audio = new Audio();
  7. function audio_init(){
  8. var options_audio = {
  9. loop: true,
  10. preload: "auto",
  11. src: $('.u-audio').attr('data-src')
  12. }
  13. for (var key in options_audio) {
  14. bg_audio[key] = options_audio[key];
  15. }
  16. bg_audio.load();
  17. audio_addEvent();
  18. bg_audio.play();
  19. }
  20. function audio_addEvent(){
  21. $("#btnAudio").on('click', audio_control);
  22. $(bg_audio).on('play',function(){
  23. bg_audio_val = false;
  24. $('#btnAudio').addClass('rotate1circle');
  25. })
  26. $(bg_audio).on('pause',function(){
  27. $('#btnAudio').removeClass('rotate1circle');
  28. })
  29. }
  30. function audio_control(){
  31. if(!bg_audio_val){
  32. bg_audio.pause();
  33. bg_audio_val = true;
  34. }else{
  35. bg_audio.play();
  36. }
  37. }
  38. audio_init();
  39. </script>

2.添加样式代码

将下面代码添加到style.css中即可:

  1. /* 音乐,请记住本站域名:qimok.cn */
  2. .btnAudio {
  3. width: 36px;
  4. height: 36px;
  5. position: fixed;
  6. rightright: 8.8px;
  7. top: 130px;
  8. overflow: hidden;
  9. background: url("图片地址") left top no-repeat;
  10. z-index: 1050;
  11. }
  12. .rotate1circle {
  13. -webkit-animation: rotate1circle 1s linear infinite;
  14. }

注意:上面的图片地址换成你自己的即可。

weinxin
七墨微信
请留下您宝贵的意见,或者每天来本站的文章页面签到,七墨将不胜感激~~
七墨
700多份网站主题源码
Adobe软件最新全家桶(win、mac)

来一发,更加快活

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • NVZA NVZA 3

      顶顶顶

        • 七墨 七墨 博主

          @NVZA 老铁没毛病 :grin: :grin: :grin: