html音频播放器案例,Html5 音频播放器实例

最新推荐文章于 2024-05-05 07:08:44 发布

纪发发

最新推荐文章于 2024-05-05 07:08:44 发布

阅读量391

点赞数

文章标签： html音频播放器案例

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

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

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

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

媒体元素的只读特性：

可用脚本控制的特性值

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

相关代码：

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

/*设置边框圆角*/

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

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

}

页面效果：

源码下载：

原文出处：

http://www.cnblogs.com/wzh2010/archive/2012/05/21/2511130.html

纪发发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html音频播放器案例,Html5 音频播放器实例

最近一直在看Html5高级程序设计，其中有两个很炫的元素audio 和video，可以制作一些效果很不错的应用。由于是一枚技术小白，于是在网上搜集资料，起码能实现一款自定义的音频播放器吧。根据网上的实例进行了代码的重写，虽然只是修改那么的一丝，但是对于html5 audio 元素的使用还是加深了理解的。================================================...
复制链接

扫一扫