您現在的位置是:電腦技術吧?>? 組裝維修 ??>??audio 標簽,audio標簽的autoplay??>??正文詳情

audio 標簽,audio標簽的autoplay

戚潔玉2019-11-19 09:55:19 人圍觀
簡介audio最新HTML5音頻標簽使用JS進行回放控制實例音頻標簽可以在HTML5瀏覽器中播放音頻文件。默認情況下,音頻提供一個控制面板,但有時我們只需要播放聲音。控制面板由我audio標簽自動

HTML5 audio標簽使用js進行播放控制實例audio標簽可以在HTML5瀏覽器中播放音頻文件。

audio默認提供一個控制面板,但是有些時候我們只需要播放聲音,控制面板由我們自己來定義其顯示的狀態。

這里我們可以使用JS來進行控制,代碼如下:代碼如下:var audio ;window.onload = function(){initAudio();}var initAudio = function(){//audio = document.createElement(audio)//audio.src='Never Say Good Bye.ogg'audio = document.getElementById('audio');}function getCurrentTime(id){ alert(parseInt(audio.currentTime) ':秒');}function playOrPaused(id,obj){if(audio.paused){audio.play();obj.innerHTML='暫停';return;}audio.pause();obj.innerHTML='播放';}function hideOrShowControls(id,obj){if(audio.controls){audio.removeAttribute('controls');obj.innerHTML = '顯示控制框'return;}audio.controls = 'controls';obj.innerHTML = '隱藏控制框'return;}function vol(id,type , obj){if(type == 'up'){var volume = audio.volume 0.1;if(volume =1 ){volume = 1 ;}audio.volume = volume;}else if(type == 'down'){var volume = audio.volume - 0.1;if(volume =0 ){volume = 0 ;}audio.volume = volume;}document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);}function muted(id,obj){if(audio.muted){audio.muted = false;obj.innerHTML = '開啟靜音';}else{audio.muted = true; obj.innerHTML = '關閉靜音';}}//保留一位小數點function returnFloat1(value) { value = Math.round(parseFloat(value) * 10) / 10;if (value.toString().indexOf(.) 0){value = value.toString() .0;}return value;}調用方式如下:代碼如下:a href=javascript:void(0); onclick=getCurrentTime('firefox');獲取播放時間/aa href=javascript:void(0); onclick=playOrPaused('firefox',this);播放/aa href=javascript:void(0); onclick=hideOrShowControls('firefox',this);隱藏控制框/aa href=javascript:void(0); onclick=muted('firefox',this);開啟靜音/ainput type=button value= id=upVol onclick=vol('firefox' , 'up' , this )/音量input type=button value=- onclick=vol('firefox' , 'down' ,this )/audio src=/images/audio/Never Say Good Bye.ogg id=audio controls=controls /audio當前音量:span id = nowVol - /span

版權聲明:本文由 戚潔玉 整理編輯。

原標題:audio標簽src,audio怎么用

轉載注明出處:http://www.dn9ww09s.icu/assemble/13589.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 堅果Pro2,堅果Pro

    堅果Pro2,堅果Pro 相關圖片堅果pro2參數Nut Pro 2是hammer technology推出的最新智能手機。我相信許多孩子剛得到的第一件事就是插上SIM卡。如何安裝nut pro2的SIM卡?請堅果手機pro2...

  • 貼吧小尾巴怎么設置不了,貼吧小尾巴怎么添加

    貼吧小尾巴怎么設置不了,貼吧小尾巴怎么添加 相關圖片貼吧會員的小尾巴怎么設置經常逛棒棒的小伙伴,發現一些用戶跟帖中的棒棒小尾巴,干脆從人群中脫穎而出,有木有。那么你知道怎么設置小尾桿嗎?很多人不知道如何設置小尾巴的...

  • 微信為什么沒有搖一搖功能,微信搖一搖功能

    微信為什么沒有搖一搖功能,微信搖一搖功能 相關圖片怎么關閉微信搖一搖功能HTML5的一個重要特性是設備定向,它將方向傳感器和運動傳感器封裝在底層,并提供DOM事件支持。此功能包括兩種類型的事件:1。設備定向:封裝有沒有搖一搖...

  • 錘子pro2什么時候出的,堅果pro發售價

    錘子pro2什么時候出的,堅果pro發售價 相關圖片堅果pro2內存不夠用怎么辦Nut pro2是hammer technology推出的最新智能手機。對于許多錘子粉,堅果pro2什么時候上市?什么是nut pro2的無障礙模式?現在,超人堅果pro什么時候上市...

  • 讀取圖像數據,如何快速讀取圖像數據

    讀取圖像數據,如何快速讀取圖像數據 相關圖片如何讀取圖片數據用VC進行數據庫編程時,經常需要對數據庫中的圖像數據進行處理,從數據庫中讀取和顯示圖像。圖像數據與文本字段不同。它作為OLE字段存儲在數據庫中,通過自動交...

  • steam創意工坊錯誤代碼103,steam加好友錯誤代碼103

    steam創意工坊錯誤代碼103,steam加好友錯誤代碼103 相關圖片steam市場顯示錯誤代碼Steam是一個非常受歡迎的游戲平臺。最近,很多玩家和朋友反映,他們遇到的最常見的問題是101和103代碼錯誤。如何解決蒸汽錯誤代碼103的問題?如何解決ste絕地求...

  • 什么是網站風格,網站的設計風格

    什么是網站風格,網站的設計風格 相關圖片有哪些網站在網頁設計或應用程序界面設計中,為了更好地規范設計文檔,設計人員通常會花時間組織各種界面元素,如字體大小、段落間距、按鈕顏色、大小等,而制作風格向導則會...

  • 高德車機離線地圖怎樣刪除,怎樣卸載高德地圖數據

    高德車機離線地圖怎樣刪除,怎樣卸載高德地圖數據 相關圖片新版高德地圖離線地圖高德地圖之所以成為流行的地圖導航軟件,是因為它的離線地圖功能可以幫助用戶在沒有任何信號的情況下順利使用。如何刪除離線地圖?如何使用離線地圖?下...

  • html img src,html5中的imgsrc

    html img src,html5中的imgsrc 相關圖片html src路徑已發現許多網絡資源存在此問題。這里有幾種方法。在實驗中,代碼如下:IMG id=imginit ALT=seaside style SRC=javascriptcss3取imgsrc...

  • 網易云音樂取消黑膠自動續費,網易云音樂如何開通自動續費

    網易云音樂取消黑膠自動續費,網易云音樂如何開通自動續費 相關圖片網易云音樂人工客服電話網易云音樂以其符合用戶喜好的超級音樂推薦服務深受很多人的喜愛。相信有很多人想知道如何取消網易云音樂的自動續費?如何注銷網易云音樂賬號?現在,...

熱評文章

  • 如何設置簽名,設置簽名

    如何設置簽名,設置簽名 相關圖片qq個性簽名設置權限如今,百度貼吧越來越注重個性化,所以在普通的回復樓里,有一個貼吧的小尾巴,還有一個個人簽名文件。今天,我們來談談如何設置簽名文件進入百度貼吧,登陸...

  • 吻合,吻合手術

    吻合,吻合手術 相關圖片神經吻合術口型匹配(交換方式)進入論壇參與討論:http://www.missyuan.com/viewthread.php?TID=417579正確的嘴型匹配是一門藝術吻合的近義詞...

  • 王者助手對局先知,王者助手怎么打開對局先知

    王者助手對局先知,王者助手怎么打開對局先知 相關圖片王者對局先知怎么設置王者榮耀作為一場競技游戲,知道你是誰,你是誰。國王榮耀助手中的火柴先知功能可以讓你知道誰在對手陣營中更強大,有利于在游戲初期鎖定目標,在搖籃中...

  • 我的激萌怎么不能拼圖,怎樣用faceu激萌拼圖

    我的激萌怎么不能拼圖,怎樣用faceu激萌拼圖 相關圖片b612可以拼圖嗎作為一款功能強大的美容相機,用戶最關心的問題是如何制作拼圖和視頻。現在,超人軟件編輯將向您介紹關于薊門的相關內容,希望您喜歡它是怎么發生的?faceu激萌相...

  • fireworks怎么用,fireworks用的多嗎

    fireworks怎么用,fireworks用的多嗎 相關圖片the fireworks對于焰火中圖標的詳細描述,在使用焰火(以下簡稱FW)進行圖標設計時要注意兩點:一是FW注重網頁設計,不適合產生一些過于復雜的PS效果,請期待FW CS5的PS過fireworks的中文...

  • 小紙條,小紙條是什么

    小紙條,小紙條是什么 相關圖片愛心小紙條小紙條是間諜的新功能。我相信有很多小朋友不知道小紙條在哪里。現在,超人軟件想向你介紹如何看到喜歡我的人。我希望它能幫到你小費呢?小費匿名小紙條...

  • html5標簽,html常用標簽

    html5標簽,html常用標簽 相關圖片htmlHTML5中新的details標簽允許用戶創建一個可擴展和可折疊的組件,使文本或標題包含一些隱藏信息。通常,詳細信息用于進一步解釋頁面上顯示的內容。它顯示了與jHTML5...

  • 使用方法是什么,正確使用放大鏡的方法是什么

    使用方法是什么,正確使用放大鏡的方法是什么 相關圖片試管架使用方法什么是ipscan?對于普通用戶來說,ipscan是一個奇怪的工具。但是對于那些經常與網絡和網絡管理員聯系的人來說,這種實用的IP地址掃描軟件可以節省他們在網絡滅火器使...

  • 如何從團隊合作方面評價,如何評論一個團隊

    如何從團隊合作方面評價,如何評論一個團隊 相關圖片團隊個人評價在設計過程中,設計評審是一個重要的環節。無論是在一個獨立的設計團隊中,還是在一個具有移動性和距離感的設計團隊中,它都是整個設計過程中不可或缺的一部分。...

  • quik是什么軟件怎么用,quik是什么軟件有用嗎

    quik是什么軟件怎么用,quik是什么軟件有用嗎 相關圖片quik有什么用最近,很多華為用戶都在問什么是軟件Quik。Quik應用程序是系統庫故事相冊應用程序,它是為系統庫預制的精彩瞬間功能。為了避免干擾,默認情況下圖標隱藏在桌面上。q...

關注微信

变脸官网查询