HTML5音视频播放demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MP3播放DEMO</title>
<style type="text/css">
body{font-size:12px;}
.list a{padding:5px;}
</style>
</head>
<body>
<input type="file" multiple onchange="changeed(this)" />按住Ctrl多选
<div class="list" id="list"></div>
<div id="v"><video controls="" autoplay="" width="300" height="40" name="media"><source src="" type="audio/mp3"></video></div>
<div id="info"></div>
<div id="method"></div>
<script>
var Point=0,List=[];
var audio = document.getElementsByTagName('video')[0];
audio.volume=0.5;
audio.addEventListener("ended",function(){
autoPlay();
});
function changeed(el){
var Files = el.files;
if(Files.length==0){return;}
var str = '';
for(var i=0; i<Files.length; i++){
var obj = {name:Files[i].name,url:URL.createObjectURL(Files[i])};
List.push(obj);
}
/*var reader = new FileReader();
reader.onload = function(ev){
var data = ev.target.result;
console.log(data);
}
reader.readAsDataURL(Files[0]);*/
renderList();
PlayNew();
}
function del(num){
List.splice(num,1);
renderList();
}
function renderList(){
var str = '';
for(var i=0; i<List.length; i++){
str += (i+1)+':<a href="#" onclick="Play('+i+')">'+List[i].name+'</a><a href="#" onclick="del('+i+')">删除</a><br/>'
}
document.getElementById("list").innerHTML = str;
}
function PlayNew(){
var num = List.length-1;
Play(num);
}
function Play(num){
Point = num;
audio.src = List[num].url;
document.getElementById('info').innerHTML = "当前播放："+List[num].name;
}
var module = 1;
function autoPlay(){
if(module==1){
Point++;
if(Point>=List.length){Point=0;}
Play(Point);
}else{
Play(Point);
}
}
function loop(num){
module = num;
if(num==0){
document.getElementById('method').innerHTML = '当前模式：单曲循环 <button onclick="loop(1)">列表循环</button>';
}else{
document.getElementById('method').innerHTML = '当前模式：列表循环 <button onclick="loop(0)">单曲循环</button>';
}
}
loop(1);
</script>
</body>
</html>
评论