最近一直在看Html5進階程式設計，其中有兩個很炫的元素audio 和video，可以制作一些效果很不錯的應用。
由于是一枚技術小白，于是在網上搜集資料，起碼能實作一款自定義的音頻播放器吧。
根據網上的執行個體進行了代碼的重寫，雖然隻是修改那麼的一絲，但是對于html5 audio 元素的使用還是加深了了解的。
===================================================================================
媒體元素的隻讀特性：
可用腳本控制的特性值
===============================================================================
相關代碼：
Html Content:
Start Music 00:00 | 00:00
01.因為愛情
02.情歌
CSS樣式
.MusicBox{
font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
background-color: #212121;
background-image: -webkit-gradient(linear,left top,left bottom,from(#1b1b1b),to(#212121));
background-image: -webkit-linear-gradient(top,#1b1b1b,#212121);
background-image: -moz-linear-gradient(top,#1b1b1b,#212121);
background-image: -ms-linear-gradient(top,#1b1b1b,#212121);
background-image: -o-linear-gradient(top,#1b1b1b,#212121);
background-image: linear-gradient(top,#1b1b1b,#212121);
border-radius: 3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
text-shadow：0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:10px 10px 25px #ccc;
-moz-box-shadow:10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
opacity: 0.9;
border-width: 1px;
border-style: solid;
border-color: #488BF0 #488BF0 #488BF0 #488BF0;
width: 820px;
height: 40px;
padding: 2px 5px;
position: absolute;
z-index: 9px;
}
.LeftControl{
background:url(../Images/sk-dark.png) left 2px no-repeat;
height: 20px;
margin-right: 8px;
margin-left: 10px;
padding: 10px;
width: 0px;
float: left;
}
.LeftControl:hover{
background:url(../Images/sk-dark.png) left -30px no-repeat;
}
.RightControl{
background:url(../Images/sk-dark.png) left -62px no-repeat;
padding: 10px;
height: 20px;
width: 0px;
margin-right: 8px;
margin-left: 10px;
float: left;
}
.RightControl:hover{
background:url(../Images/sk-dark.png) left -93px no-repeat;
}
.MainControl{
background:url(../Images/sk-dark.png) -80px -130px no-repeat;
width: 25px;
height: 20px;
float: left;
padding: 10px 15px 5px 10px;
}
.MainControl:hover{
background:url(../Images/sk-dark.png) -80px -166px no-repeat;
}
.StopControl{
width:14px;
padding: 10px 10px 5px 10px;
float:left;
height:20px;
background:url(../Images/sk-dark.png) -50px -130px no-repeat;
margin-right:16px;
}
.StopControl:hover
{
background:url(../Images/sk-dark.png) -50px -165px no-repeat;
}
.ProcessControl{
width: 500px;
padding: 5px 10px 10px 10px;
float: left;
height: 20px;
color: #fff;
margin-right: 12px;
}
.ProcessControl .SongName{ float: left;}
.ProcessControl .SongTime{ float: right;}
.ProcessControl .Process{
width: 500px;
float: left;
height: 2px;
cursor: pointer;
background-color: #000;
margin-top: 7px;
}
.ProcessControl .ProcessYet{
width: 100px;
position: absolute;
height: 2px;
left: 140px;
top: 30px;
cursor: pointer;
background-color: #7a8093;
}
.VoiceEmp{
width: 0px;
padding: 10px;
float: left;
height: 17px;
background:url(../Images/sk-dark.png) -28px -180px no-repeat;
margin-right:2px;
}
.VoiceEmp:hover{
background:url(../Images/sk-dark.png) -28px -212px no-repeat;
}
.VoiceProcess{
width: 66px;
height: 2px;
cursor:pointer;
background-color: #000;
float: left;
margin-top: 19px;
margin-right: 6px;
}
.VoiceProcessYet{
width: 0px;
height: 2px;
position: absolute;
left: 685px;
top: 21px;
cursor: pointer;
background-color: #7a8093;
}
.VoiceFull{
background:url(../Images/sk-dark.png) -28px -116px no-repeat;
width: 0px;
height: 17px;
padding: 10px;
float: left;
}
.VoiceFull:hover{
background:url(../Images/sk-dark.png) -28px -148px no-repeat;
}
.ShowMusicList
{
width:10px;
padding: 10px 10px 5px 10px;
float:left;
height:10px;
background:url(../Images/sk-dark.png) -20px 0 no-repeat;
margin:5px 0 0 12px;
cursor:pointer;
}
.ShowMusicList:hover{
background:url(../Images/sk-dark.png) -20px -29px no-repeat;
}
.MusicList {
font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
background-color: #212121;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121));
background-image: -webkit-linear-gradient(top, #1B1B1B, #212121);
background-image: -moz-linear-gradient(top, #1B1B1B, #212121);
background-image: -ms-linear-gradient(top, #1B1B1B, #212121);
background-image: -o-linear-gradient(top, #1B1B1B, #212121);
background-image: linear-gradient(top, #1B1B1B, #212121);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
border-width: 1px;
border-style: solid;
border-color: #488BF0 #488BF0 #488BF0 #488BF0;
width:600px;
height:200px;
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
opacity:0.9;
padding:2px 5px;
position:absolute;
z-index:1000;
top: 50px;
left: 103px;
display:none;
}
.MusicList .Author {
font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
background-color: #212121;
background-image:url(../Images/Eson.jpg);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width:158px;
height:200px;
float:left;
}
.MusicList .List
{
font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
background-color: #212121;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width:410px;
height:180px;
float:right;
overflow:hidden;
padding:10px 13px;
color:#fff;
}
.MusicList .List .Single
{
width:100%;
float:left;
overflow:hidden;
height:15px;
font-size:13px;
cursor:pointer;
margin-bottom:8px;
}
.MusicList .List .Single .SongName
{
width:90%;
float:left;
}
JS腳本：
$(document).ready(function(){
//擷取音頻工具
var audio = document.getElementById('myMusic');
$('.VoiceProcessYet').css('width',(audio.volume)*66); //顯示音量
var Cnum=0; //點選次數變量
$('#MainControl').click(function(e){
if(Cnum++ %2 == 0){
$(this).removeClass('MainControl').addClass('StopControl');
if(audio.src==''){
var DefaultSong =$('.Single .SongName').eq(0).attr('KV');
$('.MusicBox .ProcessControl .SongName').text(DefaultSong);
$('.Single .SongName').eq(0).css('color','#E23581');
audio.src ='Media/'+DefaultSong+'.mp3';
}
audio.play();
TimeSpan();
}else{
$(this).removeClass('StopControl').addClass('MainControl');
audio.pause();
}
e.preventDefault();
});
var Cnumx=0;
$('.ShowMusicList').click(function(e){
if(Cnumx++ % 2 == 0){
$('.MusicList').show();
var MusicBoxRight = $('.MusicBox').offset().left + $('.MusicBox').width();
var MusicBoxBottom= $('.MusicBox').offset().top + $('.MusicBox').height();
$('.MusicList').css({'left':(MusicBoxRight-$('.MusicList').width())*0.5,'top':(MusicBoxBottom+15)});
}else{
$('.MusicList').hide();
}
});
$('.MusicList .List .Single .SongName').click(function(){
$('.MusicList .List .Single .SongName').css('color','#fff');
$('#MainControl').removeClass('MainControl').addClass('StopControl');
$(this).css('color','#E23581');
var songname = $(this).attr('KV');
$('.MusicBox .ProcessControl .SongName').text(songname);
audio.src='Media/'+songname+'.mp3';
audio.play();
TimeSpan();
});
$('.LeftControl').click(function(){
$('.MusicList .List .Single .SongName').each(function(){
if($(this).css('color')=='rgb(226, 53, 129)'){
// 檢測是否為清單第一首的歌曲
var Istop = $(this).parent('.Single').prev().length==0 ? true : false;
var PrevSong;
if(Istop){
PrevSong = $('.Single').last().children('.SongName').attr('KV');
$('.Single').last().children('.SongName').css('color','#E23581');
}else{
PrevSong =$(this).parent('.Single').prev('.Single').children('.SongName').attr('KV');
$(this).parent('.Single').prev('.Single').children('.SongName').css('color','#E23581');
}
audio.src='Media/'+PrevSong+'.mp3';
$('.MusicBox .ProcessControl .SongName').text(PrevSong);
$(this).css('color','#fff');
audio.play();
return false;//跳出循環
}
});
});
$('.RightControl').click(function(){
$('.MusicList .List .Single .SongName').each(function(){
if($(this).css('color')=='rgb(226, 53, 129)'){
// 檢測是否為清單最後的歌曲
var IsBottom = $(this).parent('.Single').next().length==0 ? true : false;
var NextSong;
if(IsBottom){
NextSong = $('.Single').first().children('.SongName').attr('KV');
$('.Single').first().children('.SongName').css('color','#E23581');
}else{
NextSong =$(this).parent('.Single').next('.Single').children('.SongName').attr('KV');
$(this).parent('.Single').next('.Single').children('.SongName').css('color','#E23581');
}
audio.src='Media/'+NextSong+'.mp3';
$('.MusicBox .ProcessControl .SongName').text(NextSong);
$(this).css('color','#fff');
audio.play();
return false;//跳出循環
}
});
});
$('.VoiceEmp').click(function(){
$('.VoiceProcessYet').css('width',0);
audio.volume=0;
});
$('.VoiceFull').click(function(){
$('.VoiceProcessYet').css('width',66);
audio.volume=1;
});
//音量增加
$('.VoiceProcess').click(function(e){
//音量進度條基準參數
var VoiceProcess = $('.VoiceProcess').offset();
var VoiceProcessStrat = VoiceProcess.left; //左偏移量
var VoiceProcesslength = $('.VoiceProcess').width();
var currentProcess = e.clientX - VoiceProcessStrat;
VolumeProcessRange(currentProcess/VoiceProcesslength);
$('.VoiceProcessYet').css('width',currentProcess);
});
//音量減少
$('.VoiceProcessYet').click(function(e){
//基準參數
var VoiceProcess = $('.VoiceProcess').offset();
var VoiceProcessStrat = VoiceProcess.left; //左偏移量
var VoiceProcesslength = $('.VoiceProcess').width();
var currentProcess = e.clientX - VoiceProcessStrat;
VolumeProcessRange(currentProcess/VoiceProcesslength);
$('.VoiceProcessYet').css('width',currentProcess);
});
//進度增加
$('.Process').click(function(e){
var Process = $('.Process').offset();
var ProcessStart = Process.left;
var ProcessLength = $('.Process').width();
var currentProcess = e.clientX - ProcessStart;
DurationProcessRange(currentProcess/ProcessLength);
$('.ProcessYet').css('width',currentProcess);
$('#MainControl').removeClass('MainControl').addClass('StopControl');
});
//進度減少
$('.ProcessYet').click(function(e){
var Process = $('.Process').offset();
var ProcessStart = Process.left;
var ProcessLength = $('.Process').width();
var currentProcess = e.clientX - ProcessStart;
DurationProcessRange(currentProcess/ProcessLength);
$('.ProcessYet').css('width',currentProcess);
$('#MainControl').removeClass('MainControl').addClass('StopControl');
});
audio.addEventListener('ended',function(){
$('.MusicList .List .Single .SongName').each(function(){
if($(this).css('color')=='rgb(226, 53, 129)'){
var IsBottom =$(this).parent('.Single').next().length==0 ? true:false;
var NextSong;
if(IsBottom){
NextSong = $('.Single').first().children('.SongName').attr('KV');
$('.Single').first().children('.SongName').css('color','#E23581');
}else{
NextSong = $(this).parent('.Single').next().children('.SongName').attr('KV');
$(this).parent('.Single').next().children('.SongName').css('color','#E23581');
}
audio.src = 'Media/'+NextSong+'.mp3';
$(".MusicBox .ProcessControl .SongName").text(NextSong);
$(this).css('color','#fff');
audio.play();
return false;
}
});
},false);
});//ready end
// 時間進度處理程式
function TimeSpan(){
var audio = document.getElementById('myMusic');
var ProcessYet= 0; //記錄目前播放進度條長度
setInterval(function(){
ProcessYet =(audio.currentTime/audio.duration)*500; //width:500px
$('.ProcessYet').css('width',ProcessYet);
var currentTime = TimeDispose(audio.currentTime);
var timeAll = TimeDispose(TimeAll());
$('.SongTime').html(currentTime+"|"+timeAll);
},1000);
}
//時間格式處理程式,時間以秒為機關，需要格式化處理
function TimeDispose(number){
var minute = parseInt(number/60);
var second = parseInt(number%60);
minute=(minute>=10)?minute:"0"+minute;
second=(second>=10)?second:"0"+second;
return minute+":"+second;
}
//傳回歌曲總時間程式
function TimeAll(){
var audio = document.getElementById('myMusic');
return audio.duration;
}
//音量進度條程式
function VolumeProcessRange(rangeVal){
var audio = document.getElementById('myMusic');
audio.volume=parseFloat(rangeVal);
}
//播放進度條程式
function DurationProcessRange(rangeVal){
var audio = document.getElementById('myMusic');
audio.currentTime = rangeVal*(audio.duration);
audio.play();
}
頁面效果：
源碼下載下傳：
原文出處：
http://www.cnblogs.com/wzh2010/archive/2012/05/21/2511130.html