當前位置：
首頁 >
html5-audio 播放列表和自动播放
發布時間：2024/1/1
59
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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>?
總結
以上是生活随笔為你收集整理的html5-audio 播放列表和自动播放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 写软件的眼光看装修
- 下一篇： 安卓手机与蓝牙模块联合调试（六）-- 编