html5音乐播放器列表代码 html5音乐播放器源码

转载

智能领航员 2024-01-31 22:58:22

文章标签 html5音乐播放器列表代码 html音频播放器案例 css List ci 文章分类 HTML5 移动开发

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

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

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

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

媒体元素的只读特性：

html5音乐播放器列表代码 html5音乐播放器源码_List

可用脚本控制的特性值

html5音乐播放器列表代码 html5音乐播放器源码_List

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

相关代码：

Html Content:
 
 

     Start Music 
   
 
   

     00:00 | 00:00 
   
 
 
01.因为爱情
 
   
02.情歌
 
 
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脚本：
$(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();
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。