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。