bigcat

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>