html5在线定制,HTML5 audio定制网页音频播放器

效果图：

音频播放器

div#buttonDiv{

width:600px;

}

progress#playPercent{

width:600px;

}

div#divLeft{

float:left;

}

div#divRight{

float:right;

font-weight:bold;

}

您的浏览器不支持audio元素

播放

后退

前进

重新开始

静音

增大音量

降低音量

JS代码：

var audio,showTime;

function window_onload(){

if(window.HTMLAudioElement){

document.getElementById("btnPlay").disabled = "";

audio = document.getElementById("audio");

progress =document.getElementById("playPercent");

progress.onclick = progress_click;

}else{

document.getElementById("buttonDiv").style.display="none";

}

}

function btnPlay_onclick(){

if(audio.paused){

audio.play();

}else{

audio.pause();

}

audio.addEventListener('ended',audioEnded,false);

audio.addEventListener('play',audioPlay,false);

audio.addEventListener('pause',audioPause,false);

audio.addEventListener('timeupdate',updateProgress,false);

}

function audioEnded(ev){

audio.currentTime = 0;

this.pause();

}

function audioPlay(ev){

var btnPlay = document.getElementById("btnPlay");

btnPlay.innerHTML="暂停";

document.getElementById("btnBackPlay").disabled="";

document.getElementById("btnForwardPlay").disabled="";

document.getElementById("btnRestart").disabled="";

document.getElementById("btnMute").disabled="";

document.getElementById("btnVolumeUp").disabled="";

document.getElementById("btnVolumeDown").disabled="";

}

function audioPause(ev){

var btnPlay = document.getElementById("btnPlay");

btnPlay.innerHTML="播放";

document.getElementById("btnBackPlay").disabled="disabled";

document.getElementById("btnForwardPlay").disabled="disabled";

document.getElementById("btnRestart").disabled="disabled";

document.getElementById("btnMute").disabled="disabled";

document.getElementById("btnVolumeUp").disabled="disabled";

document.getElementById("btnVolumeDown").disabled="disabled";

}

function updateProgress(){

var value = Math.round((Math.floor(audio.currentTime)/Math.floor(audio.duration))*100,0);

var progress = document.getElementById('playPercent');

progress.value=value;

var showTime=document.getElementById("showTime");

showTime.innerHTML=calcTime(Math.floor(audio.currentTime))+'/'+

calcTime(Math.floor(audio.duration));

}

function calcTime(time)

{

var hour;

var minute;

var second;

hour=String(parseInt(time/3600,10));

if (hour.length == 1) hour = '0' + hour;

minute=String(parseInt((time%3600)/60,10));

if (minute.length == 1) minute = '0' + minute;

second=String(parseInt(time%60,10));

if (second.length == 1) second = '0' + second;

return hour+":"+minute+":"+second;

}

function progress_click(evt){

playPercent = document.getElementById("playPercent");

audio.currentTime = audio.duration * (evt.offsetX/playPercent.clientWidth);

}

function btnBackPlay_click(){

audio.currentTime -= 30.0;

}

function btnForwardPlay_click(){

audio.currentTime += 30.0;

}

function btnRestart_click(){

audio.currentTime = 0;

}

function setMute(){

if(!audio.muted){

audio.muted = true;

document.getElementById("btnMute").innerHTML = "取消静音";

}else{

audio.muted = false;

document.getElementById("btnMute").innerHTML = "静音";

}

}

function VolumeUp(){

var vol =(audio.volume).toFixed(1);

if(vol<1){

audio.volume += 0.1;

}

}

function VolumeDown(){

var vol =(audio.volume).toFixed(1);

if(vol>0){

audio.volume -= 0.1;

}

}

❑Src属性。

在该属性中指定播放音频的URL地址。

❑played属性、paused属性和ended属性。

可以通过audio元素的played属性返回一个TimeRanges对象，从该对象中可以读取音频的已播放部分的时间段。开始时间为已播放部分的开始时间，结束时间为已播放部分的结束时间。

可以通过audio元素的paused属性返回一个布尔值，表示音频是否处于暂停播放中，true表示音频暂停播放，false表示音频正在播放。

可以通过audio元素的end属性来返回一个布尔值，表示是否播放完毕，true表示音频播放完毕，false表示还没有播放完毕。

这三个属性均为只读属性。

❑volume属性与muted属性。

可以通过video元素的volume属性读取或修改视频的播放音量，范围为0到1，0为静音，1为最大音量。

可以通过video元素的muted属性读取或修改视频的静音状态，该值为布尔值，true表示处于静音状态，false表示处于非静音状态。

❑play方法。

使用play方法来播放音频，自动将元素的paused属性的属性值变为false。

❑pause方法。

使用pause方法来暂停播放，自动将元素的paused属性的属性值变为true。

❑ended事件。

当音频文件播放结束或停止时将触发该事件。

❑play事件。

当使用audio元素的play方法播放音频时将触发该事件，或者音频数据被下载完毕且audio元素被设为autoplay(自动播放)属性后自动播放音频时将触发该事件。

❑pause事件。

当执行了audio元素的pause方法暂停音频的播放时将触发该事件。

❑timeupdate事件。

当前播放位置被改变时将触发该事件。播放位置的改变可能是音频播放过程中的自然改变，也可能是人为改变，或者是由于播放不能连续而发生的跳变。

首先使用一个audio元素来播放音频，在不支持audio元素的浏览器中将直接显示文字“您的浏览器不支持audio元素”。在浏览器的下部使用一个progress元素作为播放进度条。在progress元素的下部放置一些按钮，文字分别为“播放”、“后退”、“前进”、“重新开始”、“静音”、“增大音量”和“降低音量”。在页面的右下部还使用了一个div元素，该div元素的id为“showTime”，在该div元素中显示音频总的播放时间与当前已播放部分的播放时间。

在播放音频的过程中，音频的播放位置发生改变时将调用updateProgress函数，在该函数中设置progress元素的元素值为音频当前已播放的时间除以音频总的播放时间，同时将页面右下部的div元素中的文字设定为“音频当前已播放的时间/音频总的播放时间”。在设定div元素文字时将调用一个calcTime函数，该函数的功能为将一个给定的时间段转换为“HH:MM:SS”的时间字符串(譬如2小时18分18秒为02:18:18)，然后返回该时间字符串

单击progress元素(用来显示页面上的音频播放进度条)时调用progress_click函数将音频播放位置调整到单击鼠标的位置，音频从单击鼠标处开始播放。