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