資訊專欄INFORMATION COLUMN
摘要：先看一下效果點(diǎn)擊這里查看當(dāng)然源代碼也都在這個(gè)文件里啦功能播放暫停音頻軌跡隨意拖動(dòng)播放時(shí)間及總時(shí)間靜音實(shí)現(xiàn)邏輯當(dāng)然最終還是使用的的的相關(guān)實(shí)現(xiàn)的首先寫好播放器相關(guān)的樣式并且隱藏默認(rèn)的播放器然后就是一步步實(shí)現(xiàn)邏輯啦播放暫停播放音頻暫停音頻音頻的播
先看一下效果:
點(diǎn)擊這里查看DEMO, 當(dāng)然源代碼也都在這個(gè)文件里啦;
功能:播放/暫停
音頻軌跡隨意拖動(dòng)
播放時(shí)間及總時(shí)間
靜音
實(shí)現(xiàn)邏輯:當(dāng)然, 最終還是使用的HTML5的audio的相關(guān)API實(shí)現(xiàn)的;
首先, 寫好播放器相關(guān)的樣式并且隱藏默認(rèn)的播放器;
然后, 就是一步步實(shí)現(xiàn)邏輯啦:
audio.play()播放音頻;
audio.pause()暫停音頻;
音頻的播放與暫停, 就執(zhí)行這兩函數(shù)就行啦, 然后就是切換一下相關(guān)樣式的class;
手動(dòng)控制音頻的播放軌跡, 主要使用到touch相關(guān)的事件:
在touchstart時(shí)先獲取小圓點(diǎn)的初始位置;
在touchmove時(shí)需要設(shè)置小圓點(diǎn)的移動(dòng)位置, 播放的進(jìn)度條以及播放的當(dāng)前時(shí)間, 還得注意拖到最后及開始時(shí)還繼續(xù)拖動(dòng)的位置處理;
播放時(shí)間及總時(shí)間獲取音頻總時(shí)間使用loadedmetadata事件:
當(dāng)元數(shù)據(jù)（比如分辨率和時(shí)長(zhǎng)）被加載時(shí)觸發(fā)的事件;
然后在事件中調(diào)用audio.duration返回音頻的長(zhǎng)度(單位秒);
獲取當(dāng)前播放位置的時(shí)間用audio.currentTime
靜音靜音直接設(shè)置audio.muted = true/false
有幾個(gè)關(guān)鍵點(diǎn)需要注意:
當(dāng)音頻播放完畢后, 調(diào)用一下load()方法, 不然需要再次播放時(shí)得相刷新一下頁面;
還是播放結(jié)束后, 需要手動(dòng)重置小圓點(diǎn)的移動(dòng)位置為 0;
手動(dòng)拖動(dòng)到最右邊時(shí), 最好是設(shè)置移動(dòng)距離為 100% - 1, 不然直接拖動(dòng)到結(jié)束會(huì)回到開始;
當(dāng)在最開始就向左拖動(dòng)時(shí)直接將移動(dòng)距離設(shè)置為 0;
參考資料:HTML 5 視頻/音頻參考手冊(cè)
HTML DOM Audio 對(duì)象
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80136.html
摘要：一款跨瀏覽器的音頻播放器，可惜例子和文檔都比較少英文文檔官網(wǎng)使用方法第一步引用文件第二步，全局初始化第三步，在需要的地方放上下面類似的代碼注意是直接閉合標(biāo)簽然后，然后就沒有了，以上只適用靜態(tài)的頁面，如果動(dòng)態(tài)添加音頻怎么辦相信好多人都需要這種 一款跨瀏覽器的音頻播放器，可惜例子和文檔都比較少 英文文檔 官網(wǎng) 使用方法： 第一步引用文件： 第二步，全局初始化： audiojs.ev...
摘要：尤其是喬布斯在年發(fā)布的一篇的文章。喬布斯在里面寫下了關(guān)于的一點(diǎn)看法，說明自己為什么不使用，談到關(guān)于的一些問題，比如開放性，安全性，對(duì)于設(shè)備續(xù)航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。 今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進(jìn)入主題之前我們先了解一下Flash與html5這兩種技術(shù)的時(shí)代背景與發(fā)展歷史。 1.前...
摘要：尤其是喬布斯在年發(fā)布的一篇的文章。喬布斯在里面寫下了關(guān)于的一點(diǎn)看法，說明自己為什么不使用，談到關(guān)于的一些問題，比如開放性，安全性，對(duì)于設(shè)備續(xù)航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。 今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進(jìn)入主題之前我們先了解一下Flash與html5這兩種技術(shù)的時(shí)代背景與發(fā)展歷史。 1.前...
閱讀 678·2021-11-15 11:37
閱讀 4135·2021-09-09 09:34
閱讀 3573·2019-08-30 15:52
閱讀 2613·2019-08-29 14:03
閱讀 2854·2019-08-26 13:36
閱讀 1597·2019-08-26 12:16
閱讀 1602·2019-08-26 11:45
閱讀 3494·2019-08-23 18:41
