Html5 音频播放器实例

最近一直在看Html5高级程序设计，其中有两个很炫的元素audio 和video，可以制作一些效果很不错的应用。

由于是一枚技术小白，于是在网上搜集资料，起码能实现一款自定义的音频播放器吧。

根据网上的实例进行了代码的重写，虽然只是修改那么的一丝，但是对于html5 audio 元素的使用还是加深了理解的。

===================================================================================

媒体元素的只读特性：



可用脚本控制的特性值



===============================================================================

相关代码：

Html Content:

<audio id="myMusic"></audio>
<!-- 放置一个隐藏域，存放媒体文件暂停的时间点 -->
<input id="PuaseTime" type="hidden"/>

<!-- 编写音乐盒界面 -->
<div class="MusicBox">
<!-- 上一个媒体文件的图标 -->
<div class="LeftControl"></div>
<!-- 开始和暂停的控制图标 -->
<div id="MainControl" class="MainControl"></div>
<!-- 下一个媒体文件的图标 -->
<div class="RightControl"></div>
<!-- 进度框 -->
<div class="ProcessControl">
<div class="SongName">Start Music</div>
<div class="SongTime">00:00 | 00:00</div>
<!-- 全部时长进度条 -->
<div class="Process"></div>
<!-- 已播放时长进度条 -->
<div class="ProcessYet"></div>
</div>
<div class="VoiceEmp"></div> <!--静音图标 -->
<div class="VoiceProcess" ></div> <!-- 全音量进度条 -->
<div class="VoiceProcessYet" ></div><!--  当前音量进度条 -->
<div class="VoiceFull" ></div><!-- 全音量图标 -->
<div class="ShowMusicList" ></div><!--  显示或隐藏媒体文件列表图标 -->
</div>

<div class="MusicList">  <!-- 媒体文件列表区域 -->
<div class="Author"></div> <!-- //当前媒体文件的 -->
<div class="List"> <!-- //媒体文件列表 -->
<div class="Single" > <!-- //单个媒体文件 -->
<span class="SongName"  KV="因为爱情" >01.因为爱情</span>
</div>
<div class="Single" > <!-- //单个媒体文件 -->
<span class="SongName"  KV="情歌" >02.情歌</span>
</div>
</div>
</div>

CSS样式

/*
*Musicbox css
*by bigboy
*2014-2-11
*/

.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脚本：

<script type="text/javascript">
$(document).ready(function(){

//获取音频工具
var audio = document.getElementById('myMusic');
$('.VoiceProcessYet').css('width',(audio.volume)*66); //显示音量
/*开始、暂停按钮*/
/*$('#MainControl').toggle(function(){ //在jquery1.8之前的版本不会隐藏
$(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();
},function(){
$(this).removeClass('StopControl').addClass('MainControl');
audio.pause();
});*/
/*jqyery1.9之后的版本就不能用toggle切换不同事件了*/

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();
});

/*========显示或隐藏播放列表========*/
/*$('.ShowMusicList').toggle(function(){
$('.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)});
},function(){
$('.MusicList').hide();
});*/

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');

});

/*======监听媒体文件结束ended，实现歌曲结束循环播放下一曲=======*/

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();
}
</script>

页面效果：



源码下载：

http://download.csdn.net/detail/monarch_lin/6921699

原文出处：/article/5585546.html