zoukankan      html  css  js  c++  java
  • 简单的音乐轮播JS

    首先说明一点,此篇文章只是为了回应一些博友的要求,本人并非专业搞js的,所以键盘侠和各路大神如果看到此文还请轻喷或者可以直接关掉页面~

    直接上代码:

    <div id="myboot"><audio id="mp3" controls="controls"></audio></div>
    
    <script type="text/javascript">
    var myAudio = document.getElementById('mp3');
    window.onload = function () {
      var arr = [//这里放你的音乐外链就可以了
                 "http://t.cn/RDE1jdk?mp3",
                 "http://t.cn/RDE1Y2D?mp3"
      ];
      myAudio.preload = true;
      myAudio.controls = true;
      var a = arr.pop();
      arr.unshift(a)
      myAudio.src = a;         //每次读数组最后一个元素
      myAudio.addEventListener('ended', playEndedHandler, false);
      myAudio.loop = false;//禁止循环,否则无法触发ended事件
      function playEndedHandler() {
        var a = arr.pop();
        arr.unshift(a)
        myAudio.src = a;
        myAudio.play();
      }
    }
    </script>
    

    实现方式比较简单,有些代码常识的基本都能看懂,主要应用的也就是audio标签的一些api,利用数组的pop和unshift方法实现轮播,因为一些浏览器进制进入页面时自动播放音乐,会出现报错,而且我感觉也没有太大必要所以就没再去研究。之前倒是一直纠结一件事。如何做到异步播放音乐,保证页面刷新的时候音乐播放不受影响,想过iframe实现,但是木有成功... 如果有大神有好的想法,希望提出分享~

  • 相关阅读:
    快速模幂
    UPC-2249 曲线分割【递推】
    maven 服务器
    maven repo
    php-fpm sock
    mysql
    go 1
    xdebug
    centos
    win10 2503 2502
  • 原文地址:https://www.cnblogs.com/ldy-blogs/p/9529986.html
Copyright © 2011-2022 走看看