Html5 Audio自定义UI界面
在Html5中自定义Audio或者Video播放器控件,目前所有浏览器基都已经支持Html5所有标签控件属性,但是目前Audio和Video在各浏览器上呈现都有所不同。在开发过程可能需要自行开发播放器的UI界面,本文主要介绍Audio控件的属性,拓展Audio标签的使用。.
Audio的默认UI界面
从以上可以看到各浏览器呈现出来的Audio控件都是各异不同,这里在所有的浏览器中都是同样的Audio代码<audio id="player" src="20111025ed.mp3" controls="controls" autoplay></audio>,如果要达到所有浏览器上都呈现统一的UI界面就需要自己开发,自己定义Audio的界面,本文不会给出一个完整Audio播放器示例代码,本文主要是介绍的自定义的开发思路,通过本文的思路引导介绍完全可以开发出一个自己的 UI界面,而且在所有浏览器上都统一显示。
(双击视频进入或退出全屏模式)
示例一
自定义Audio第一步,将默认的界面去掉。这很简单只需要Audio的Controls属性去掉即可(Controls 属性Video控件也是同样有这个属性),简单的<audio id="trackAudio" scr="**.mp3"></audio>即不再显示默认的UI界面。
第二步,获取音乐文件的播放时间,以及按钮控制播放音乐。currentTime和duration,currentTime用来获取当前播放时间的位置,duration用来获取音乐文件的播放时间,在获取播放时间同时还要结合ontimeupdate,在ontimeupdate里面触发,ontimeupdate是个延续实时触发的属性,当音乐文件播放即触发,直到播放停止。按钮触发音乐播放,通过play()和pause()方法来播放和暂停音乐。
第三步,音量控制。通过按钮来音量大小,也就是修改Audio的volume属性。这里通过按钮累加递增和累减递减来增加和减少volume的值达到音量到小控制。下面是详细代码。
<button onclick="document.getElementById('trackAudio').play();">
Play
</button>
<button onclick="document.getElementById('trackAudio').pause();">
Pause
</button>
<button onclick="document.getElementById('trackAudio').volume+=0.1">
+ Volume
</button>
<button onclick="document.getElementById('trackAudio').volume-=0.1">
- Volume
</button>
<br />
<audio id="trackAudio" src="01 - The Far Side Of The World.mp3"
ontimeupdate="document.getElementById('playTime').innerHTML =
Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
<p>Your browser does not support the audio element</p>
<!--Html5 Audio自定义UI界面-->
<!--Copyrigiht (C) 遗昕 | weisim3.com 07.06.2012-->
</audio>
<span id="playTime">0 / 0</span>
示例二
进一步深入,在示例二中完成Audio音乐播放进度条,以及时间格式处理。在currentTime将duration的时间转化成60进制的分秒时间,通过播放时间与音乐总时间的百分比完成进度条显示,这里用div作为进度显示,让div的宽乘以播放时间的百分比其原理和“ ActionScript3.0 百分比控制对象 ”同样,同样在ontimeupdate中触发。音量控制,Audio的总值是0到1,这里处理递增音量到达“1”最高峰量是将要终止递增音量值,否则报错;同样递减到最小量“0”时也要终止递减处理。其它onseeking和onseeked用来触发Audio的seeking属性,Seeking拥有一个true和false值,当Audio播放音乐是音乐跳到新的时间帧位置为false,在跳帧过程中为true,本文没有作Seeking属性的具体演示,一般使用在拖拽播放点是可以用到Seeking属性,关于Seeking属性演示可以参考 w3schools.com的HTML5 Audio/Video DOM seeking Property。下面是示例二详细代码展示。
<script type="text/javascript">
var Allseek;
window.onload = function () {
![]()
var totalSeek = document.getElementById('seek');
Allseek = (totalSeek.style.width).replace("px", "");
![]()
}
![]()
//Html5 Audio自定义UI界面
//Copyrigiht (C) 遗昕 | weisim3.com 07.06.2012
![]()
//播放时间(分秒)进度条运算/currentTime/duration(minutes:seconds) Progressbar
function mayData() {
var audios = document.getElementById('demo');
![]()
document.getElementById('time').innerHTML =
parseInt((audios.currentTime / 60) % 60) +
":" + parseInt(audios.currentTime % 60) +
' / ' + parseInt((audios.duration / 60) % 60) +
':' + parseInt(audios.duration % 60);
![]()
var seek = document.getElementById('seek');
var seekData =
parseInt(audios.currentTime) / parseInt(audios.duration) * 100;
document.getElementById('Seeking').innerHTML = seekData + "%";
seek.style.width = (Allseek * seekData) / 100 + "px";
![]()
![]()
document.getElementById("audio").innerHTML =
Math.round(document.getElementById('demo').volume * 10) + "/" + 10;
![]()
}
![]()
//音量递增 audio volume ++
function IncreaseAudio() {
var volumeNum = document.getElementById('demo').volume ;
![]()
if (volumeNum < 1) {
try
{
document.getElementById('demo').volume += 0.1;
}
catch(e)
{
document.getElementById('demo').volume = 1;
}
}
![]()
}
![]()
//音量递减 /audio volume --
function DecreaseAudio() {
![]()
var volumeNum = document.getElementById('demo').volume / 10;
![]()
if (volumeNum >= 0) {
try
{
document.getElementById('demo').volume -= 0.1;
}
catch(e)
{
document.getElementById('demo').volume=0;
}
![]()
}
}
![]()
![]()
function isSeeking() {
myAudio = document.getElementById("demo");
document.getElementById("span1").innerHTML = "Seeking: " + myAudio.seeking;
}
![]()
</script>
<strong>示例二</strong>
<div style=" padding-top:5px">
<audio id="demo" preload="auto" src="20111025ed.mp3" autoplay="autoplay"
ontimeupdate="mayData()" onseeking="isSeeking()" onseeked="isSeeking()">
<!--Html5 Audio自定义UI界面-->
<!--Copyrigiht (C) 遗昕 | weisim3.com 07.07.2012-->
</audio>
<div>
<button onclick="document.getElementById('demo').play()">
Play</button>
<button onclick="document.getElementById('demo').pause()">
Pause</button>
<button onclick="IncreaseAudio()">
+ Volume</button>
<button onclick="DecreaseAudio()">
- Volume</button>
<!--音量显示 audio Volume-->
<span id="audio" style="padding: 0px 3px"></span>
</div>
<div style="padding: 10px">
<!--播放进度百分比/Percentage-->
<span id="Seeking"></span>
<!--进度条/Progressbar-->
<div id="seek" style="background-color: Red; height: 8px;
position: relative; width: 300px" />
<div id="Div1" style="background-color: green; height: 8px;
position: relative; width: 300px;
z-index: -1;" />
</div>
<!--播放时间显示/Play time-->
<div style="width: 100px" id="time" title="播放时间">
</div>
<span id="span1">…</span>
<div class="footer">
<a href="http://www.weisim3.com" target="_parent">
www.weisim3.com
</a>
</div>
</div>
总结Html 5 的开发可以说就是javascript的开发,在以前或许开发者会不把Javascript看得那么重要,而在Html 5中就是Javascript的对象操作。正如两年前flash的火爆就是Actionscript的开发,用Actionscript来控制flash舞台对象。而html 5中就是Javascript的核心开发。 Html5 Audio和Video两个控件有很相同的属性,播放功能除了一个是audio,一个video以外基本属性都相同,在本文的示例脚本同样也可以用在Video上面。关于Audio和Video的更加详细资料可以参考 http://www.w3schools.com/html5/html5_ref_av_dom.asp HTML5 Audio/Video DOM Reference。