html5-audio 播放列表和自动播放

最新推荐文章于 2024-03-21 14:55:27 发布

xiaozhen0610

最新推荐文章于 2024-03-21 14:55:27 发布

阅读量2.4k

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hj0ccac1hjcb.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

一个简单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>

xiaozhen0610

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
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'; // 初始化播放
复制链接

扫一扫