您現在的位置是:電腦技術吧?>? 故障問題 ??>??html音樂播放器代碼,html5音樂播放器源碼??>??正文詳情

html音樂播放器代碼,html5音樂播放器源碼

陸璞玉2019-11-15 23:10:36 人圍觀
簡介音樂播放器前端獲取htmlvideoelement和htmludioelement objects1//audio您可以直接通過new 2 media=newaudio(ht在線音樂播放器源碼

獲取HTMLVideoElement和HTMLAudioElement對象  1 //audio可以直接通過new創建對象  2 Media = newAudio(http://www.abc.com/test.mp3);  3 //audio和video都可以通過標簽獲取對象  4 Media = document.getElementById(media);  Media方法和屬性:  HTMLVideoElement 和 HTMLAudioElement 均繼承自 HTMLMediaElement  01 //錯誤狀態  02 Media.error; //null:正常  03 Media.error.code; //1.用戶終止 2.網絡錯誤 3.解碼錯誤 4.URL無效  04 //網絡狀態  05 Media.currentSrc; //返回當前資源的URL  06 Media.src = value; //返回或設置當前資源的URL  07 Media.canPlayType(type); //是否能播放某種格式的資源  08 Media.networkState; //0.此元素未初始化 1.正常但沒有使用網絡 2.正在下載數據 3.沒有找到資源  09 Media.load(); //重新加載src指定的資源  10 Media.buffered; //返回已緩沖區域,TimeRanges  11 Media.preload; //none:不預載 metadata:預載資源信息 auto:  12 //準備狀態  13 Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  14 Media.seeking; //是否正在seeking  15 //回放狀態  16 Media.currentTime = value; //當前播放的位置,賦值可改變位置  17 Media.startTime; //一般為0,如果為流媒體或者不從0開始的資源,則不為0  18 Media.duration; //當前資源長度 流返回無限  19 Media.paused; //是否暫停  20 Media.defaultPlaybackRate = value;//默認的回放速度,可以設置  21 Media.playbackRate = value;//當前播放速度,設置后馬上改變  22 Media.played; //返回已經播放的區域,TimeRanges,關于此對象見下文  23 Media.seekable; //返回可以seek的區域 TimeRanges  24 Media.ended; //是否結束  25 Media.autoPlay; //是否自動播放  26 Media.loop; //是否循環播放  27 Media.play(); //播放  28 Media.pause(); //暫停  29 //控制  30 Media.controls;//是否有默認控制條  31 Media.volume = value; //音量  32 Media.muted = value; //靜音  33 //TimeRanges(區域)對象  34 TimeRanges.length; //區域段數  35 TimeRanges.start(index) //第index段區域的開始位置  36 TimeRanges.end(index) //第index段區域的結束位置  事件:  01 eventTester = function(e){  02 Media.addEventListener(e,function(){  03 console.log((newDate()).getTime(),e);  04 });  05 }  06  07 eventTester(loadstart); //客戶端開始請求數據  08 eventTester(progress); //客戶端正在請求數據  09 eventTester(suspend); //延遲下載  10 eventTester(abort); //客戶端主動終止下載(不是因為錯誤引起),  11 eventTester(error); //請求數據時遇到錯誤  12 eventTester(stalled); //網速失速  13 eventTester(play); //play()和autoplay開始播放時觸發  14 eventTester(pause); //pause()觸發  15 eventTester(loadedmetadata); //成功獲取資源長度  16 eventTester(loadeddata); //  17 eventTester(waiting); //等待數據,并非錯誤  18 eventTester(playing); //開始回放  19 eventTester(canplay); //可以播放,但中途可能因為加載而暫停  20 eventTester(canplaythrough); //可以播放,歌曲全部加載完畢  21 eventTester(seeking); //尋找中  22 eventTester(seeked); //尋找完畢  23 eventTester(timeupdate); //播放時間改變  24 eventTester(ended); //播放結束  25 eventTester(ratechange); //播放速率改變  26 eventTester(durationchange); //資源長度改變  27 eventTester(volumechange); //音量改變  自己寫的一段js:  01.$(function() {  02.  03. var p = new Player();  04. p.read(play);  05.  06. $(#stop).click(function() {  07. p.pause();  08. });  09.  10. $(#start).click(function() {  11. p.play();  12. });  13.  14. $(#show).click(function() {  15. alert(p.duration());  16. });  17.  18. setInterval(function() {  19. $(#currentTime).text(p.currentTime());  20. },1000);  21.  22.});  23.  24.function Player() {};  25.Player.prototype = {  26. box : new Object(),  27. read : function(id) {  28. this.box = document.getElementById(id);  29. },  30. play : function() {  31. this.box.play();  32. },  33. pause : function() {  34. this.box.pause();  35. },  36. src:function(url){  37. this.box.src=url;  38. },  39. currentTime:function(){  40. return (this.box.currentTime/60).toFixed(2);  41. }  42.  43.};  44.Player.prototype.duration=function(){  45. return (this.box.duration/60).toFixed(2);  46.};

版權聲明:本文由 陸璞玉 整理編輯。

原標題:html音樂播放器,html5音樂播放器

轉載注明出處:http://www.dn9ww09s.icu/fault/12645.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 蘋果定位功能有什么用,怎樣使用蘋果手機定位功能

    蘋果定位功能有什么用,怎樣使用蘋果手機定位功能 相關圖片蘋果手機的定位功能沒有網絡能用嗎當iPhone用戶丟失手機或想定位自己的手機時,可以通過icloud使用蘋果的定位功能。不過,icloud只能定位蘋果設備的大致位置,使用蘋果定位并不十分...

  • 邊框圓角,圓角邊框怎么設置

    邊框圓角,圓角邊框怎么設置 相關圖片html圓角矩形邊框!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xps做圓角矩形邊框...

  • 怎么看window10的版本,surface pro怎么看幾代

    怎么看window10的版本,surface pro怎么看幾代 相關圖片win10歷史版本號當用戶想知道他們的win10系統是否是最新版本時,他們可以通過檢查版本號來判斷。有些用戶不知道如何查看win10。實際上,只要使用命令查看win10版本,就可以bios開機密...

  • 四個全面布局的意義,戰略布局的意義

    四個全面布局的意義,戰略布局的意義 相關圖片四個全面布局隨著Web2.0標準化設計理念的普及,國內許多大型門戶網站都采用了div CSS的方式,52css.com也成為學習CSS頁面布局技術的先鋒網站。從實際應用來看布局在銷售中的意義...

  • 2.4g和5g要不要合并,2.4g頻段怎么設置

    2.4g和5g要不要合并,2.4g頻段怎么設置 相關圖片雙頻路由器關閉5g快今天的無線WiFi,我們發現有的標著2.4G,有的標著5g,2.4G和5g WiFi是什么意思?他們之間有什么區別?有人認為5g肯定比2.4G好,其實這是錯誤的2.4g能跑滿100m嗎...

  • 紐約時報在線閱讀,如何閱讀紐約時報

    紐約時報在線閱讀,如何閱讀紐約時報 相關圖片《紐約時報》《紐約時報》有什么功能?在Firefox瀏覽器中打開《紐約時報》時,值得注意的是,此網站()提供了保存到計算機上供脫機使用的數據。從這句話很容易推斷這是一個離線...

  • office365激活碼,獲取office365激活碼

    office365激活碼,獲取office365激活碼 相關圖片office2016激活碼辦公軟件有多種,其中office365也有很多用戶。Office 365是一款訂閱式跨平臺辦公軟件,允許任何人使用任何設備隨時隨地創建和共享內容。想充分享受office365激活方法...

  • steam一直無法連接網絡,steam登錄連接不上網絡

    steam一直無法連接網絡,steam登錄連接不上網絡 相關圖片steam登錄顯示無法連接網絡Steam是世界上著名的游戲平臺,許多玩家(以及中國的許多玩家)在這里購買、下載、討論、上傳和共享游戲和軟件。僅僅因為steam的服務器在國外,國內用戶...

  • css3flexbox布局,css3flexbox使用場景

    css3flexbox布局,css3flexbox使用場景 相關圖片css flex這背后有一個悲傷的故事,所以我選了一個有點像黨的標題的標題。我不會說什么具體的。很長一段時間以來,人們都知道CSS3中有這樣一個東西,并且隨著規范的改變,它的版c...

  • 對于目標系統文件,對于目標文件系統過大怎么辦

    對于目標系統文件,對于目標文件系統過大怎么辦 相關圖片系統文件過大對于目標文件系統文件太大的提示,通常在用戶傳輸一些大文件時出現。原因是什么?怎么解決?文件太大而無法傳輸的問題通常是目標存儲媒體格式的問題。當u盤或win...

熱評文章

  • 升級win10,怎么升級win10

    升級win10,怎么升級win10 相關圖片win8.1Win10是微軟主操作系統的最新版本。有些新功能只能在win10上體驗,所以很多舊版本系統的用戶也開始想升級自己的系統。本文將與您分享win8.1升級win10bwin...

  • 光驅讀不出光盤怎么辦,外置光驅讀不出光盤

    光驅讀不出光盤怎么辦,外置光驅讀不出光盤 相關圖片電腦光驅讀不出dvd光盤CD-ROM驅動器是筆記本電腦的標準工具。許多臺式機也將配備CD-ROM驅動器,但許多人已經很長時間沒有聯系CD-ROM驅動器了。然而,一些大型游戲的運營商仍然win10光驅...

  • 代碼例子,g代碼實例

    代碼例子,g代碼實例 相關圖片代碼呈現:方法1:代碼如下:!DOCTYPE HTML htmlbody canvas id=mycanvas width=500 height=500yourbrhtml5基礎代碼實例...

  • dfu模式和恢復模式哪個好,dfu刷機弊端

    dfu模式和恢復模式哪個好,dfu刷機弊端 相關圖片蘋果用itunes恢復系統DFU的全稱是設備固件升級,是iPhone固件的強制升級和降級模式。只有當用戶的iPhone無法打開,iTunes無法識別,或者用戶的iPhone被降級越獄時,蘋果11更新不了13.1...

  • 碎玻璃特效,照片玻璃碎片特效

    碎玻璃特效,照片玻璃碎片特效 相關圖片快手玻璃碎片特效今天我們將為您帶來一個由HTML5Canvas實現的圖像玻璃碎片效果。圖像以玻璃碎片的形式出現在界面上,然后玻璃破碎的效果似乎逐漸被報道。呈現如下:HTML代碼破碎玻...

  • kux格式播放器,哪個播放器支持kux格式

    kux格式播放器,哪個播放器支持kux格式 相關圖片支持kux播放器有些用戶看到Kux格式的文件時會感到奇怪。事實上,Kux格式是優酷獨有的視頻格式。如果用戶想打開Kux格式供魏健觀看,需要使用優酷播放器。Kux不是一種常見的視qlv格式...

  • applepay無法添加卡,apple pay怎么打開

    applepay無法添加卡,apple pay怎么打開 相關圖片未能設置apple pay蘋果支付是蘋果公司的一種快捷支付方式,給iPhone用戶帶來了極大的便利。但是,當用戶在Apple pay中添加卡時,無法添加。蘋果支付不能添加的卡是什么綁定apple pay卡無...

  • 交互文檔,交互文檔說明

    交互文檔,交互文檔說明 相關圖片sketch 交互文檔交互規范文檔是交互設計器輸出的重要組成部分,關系到設計方案能否最大限度地實現。新的互動人,大多會擔心如何編寫互動文檔。今天我們來談談這個話題,交互文檔...

  • 聯想 Z5 Pro,聯想Z5 Pro GT

    聯想 Z5 Pro,聯想Z5 Pro GT 相關圖片聯想手機怎么樣自vivo nex以來,真正的全屏手機層出不窮。本文與大家分享一款來自聯想的新機型:聯想Z5 pro采用了創新的滑蓋式全屏幕設計,實現了超級95.0聯想手機...

  • 值得關注的一件事,值得關注的博主

    值得關注的一件事,值得關注的博主 相關圖片ins有哪些值得關注的人如果設計趨勢只停留在色彩、交互效果和卡片界面的討論上,我們可能會在未來兩年內落后。今天,讓華僑設計總監斯佩爾與同學們一起探討五大影響人類生活方...

關注微信

变脸官网查询