zoukankan      html  css  js  c++  java
  • html5-audio 播放列表和自动播放

    一个简单audio的列表和播放小例子

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <script type="text/javascript">
    var count = 43; //一共多少MP3文件
    var index = '18.mp3'; // 初始化播放那个文件
    window.onload = function(){
        var audio = new Audio();
        audio.preload = true;
        audio.controls = true;
        audio.loop = false;
        audio.src = index;
        document.body.appendChild(audio);
        audio.play();
        audio.addEventListener('ended', playEndedHandler, false);
    
        function playEndedHandler(){
            var name = parseInt(index);
            name = name+1 < 10 ? '0'+(name+1)+'.mp3' : (name+1)+'.mp3';
            console.log(name)
            name>count && audio.removeEventListener('ended',playEndedHandler,false);
            
            audio.src = name;
            audio.play();
        }
    
    
    
        var div = document.createElement('div');
        var ul = document.createElement('ul');
        for (var i = 1; i <=count; i++) {
            var name = i<10 ? '0'+i+'.mp3' : i+'.mp3'
            var li = document.createElement('li');
            var text = document.createTextNode(name);
            li.appendChild(text);
            ul.appendChild(li);
            li.addEventListener('click',function(event){
                audio.src=event.target.innerHTML;
                audio.play();
            },false)
        }
        div.appendChild(ul);
        document.body.appendChild(div);
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    生成唯一流水码
    搜索类
    数字转中文
    字符串转数组工具类
    类转换
    P1112 区间连续段
    P1113 同颜色询问
    Turtlebot3 机器学习
    Turtlebot2进阶教程
    turtlebot A2
  • 原文地址:https://www.cnblogs.com/tongchuanxing/p/6408390.html
Copyright © 2011-2022 走看看