HTML audio 音频

HTML5 Audio(音頻)

<div class="Ado" id="audio22" title="mp3 來自 贊美詩網 網頁https://www.zanmeishi.com/"> <input type="range" step="1" min="0" max="100" onmouseup="RangeChange(this.value)" onmousedown="audio2.pause()" style="width:200px;" /> <input style = "width: 150px;background-color: #888;height:20px;font-size: 16px;"/><br /><img onclick="audio2.load()" /><img onclick="audio2.play()" /><img onclick="audio2.pause()" /><br /> <img onclick="FvolU()"/><nowrap style="font-size: 16px;width: 25px;" >kk</nowrap><img onclick="Fvold();" /> <img onclick="audio2.volume = 0 ;DDp();" /><img onclick="FItemsL()"/><img onclick="FItemsA()"/> <select id="selectSort" onchange="audio2.src=this.value;audio2.play() " style="width:200px;background-color: #888;cursor:pointer;font-size: 16px "> <option value="https://api.zanmeishi.com/song/p/6600.mp3" /> 為何對我這麼好 <option value="https://api.zanmeishi.com/song/p/6601.mp3" /> 你名何其美 <option value="https://api.zanmeishi.com/song/p/6602.mp3" /> 親密的朋友 <option value="https://api.zanmeishi.com/song/p/6603.mp3" /> 自由 <option value="https://api.zanmeishi.com/song/p/6604.mp3" /> 打開黑暗的角落 <option value="https://api.zanmeishi.com/song/p/6605.mp3" /> 榮耀歸神,平安給人 <option value="https://api.zanmeishi.com/song/p/6606.mp3" /> 水火 <option value="https://api.zanmeishi.com/song/p/6607.mp3" /> 我一生 <option value="https://api.zanmeishi.com/song/p/6608.mp3" /> 給你真平安 <option value="https://api.zanmeishi.com/song/p/6609.mp3" /> 放手交給他 <option value="https://api.zanmeishi.com/song/p/6610.mp3" /> 新天地 </select> <div id="tttt" style="font-size: 16px" >tt</div> </div><script> var Bplay = "https://2.bp.blogspot.com/-DWiUXD-LKOw/XiKzS7Vrr2I/AAAAAAAALj4/d8ok5wiSNYEmzWYo1N_ZQKXbfPzK8ClWwCKgBGAsYHg/s200/01.jpg" ; var Bstop = "https://4.bp.blogspot.com/-FiXXZ_dT-_s/XiKzS8JwPmI/AAAAAAAALj4/3i73jv2KD5cIIB3vjAqWC1y45gakWlYnQCKgBGAsYHg/s200/03.jpg" ; var Bpause = "https://2.bp.blogspot.com/-kOPiTYMNXTU/XiKzSxrPnoI/AAAAAAAALj4/1kKMblLOxtMtE5VWfnqiqB_yql5NatzzwCKgBGAsYHg/s200/02.jpg" ; var QUP ="https://3.bp.blogspot.com/-uXyC1W8zKRk/XiKzS4aenOI/AAAAAAAALj4/xIno4RbY1pAJpWD_cAHF1z1ZaKsS4rlGACKgBGAsYHg/s200/09.jpg"; var QDW = "https://1.bp.blogspot.com/-POAVe-StFDU/XiKzS7c7yNI/AAAAAAAALj4/YxFSmsY3DEY6x495l1Gdd8XllbFlVwNbQCKgBGAsYHg/s200/08.jpg"; var VLU ="https://2.bp.blogspot.com/-rKJ3oa9ENAU/XiKzS4T7JrI/AAAAAAAALj4/Kt27Y5bLUOgqEtcRS2doFcIW0LoluSlEACKgBGAsYHg/s200/19.jpg"; var VLD ="https://4.bp.blogspot.com/-YO0PKgfj2K0/XiKzSziDoZI/AAAAAAAALj4/xd-hBQX9bNgCHtOXOzS1S35u6Q45D6iawCKgBGAsYHg/s200/20.jpg"; var VLM ="https://3.bp.blogspot.com/-NfCYoBAcA4Q/XiKzS-M3iXI/AAAAAAAALj4/rvsrulxZFaAxlD5uN1c2Ra2UajvsO_vjQCKgBGAsYHg/s200/17.jpg"; var PG = 1; var audio2 = new Audio(); var TTm= document.getElementById("tttt"); var Nname = audio22.children ; audio2.src = Nname[13].options[0].value; audio2.onloadeddata = function(){DDp() }; function DDp(){ Nname[1].value = sToTime(audio2.duration)+" / " + sToTime(audio2.currentTime) ; TTm.innerHTML=Nname[13].options.length+"/"+(Nname[13].selectedIndex+1 ) ; if( audio2.ended == 1){FItemsA()} ; Nname[3].src = Bstop ; Nname[4].src = Bplay ; Nname[5].src = Bpause ; Nname[11].src = QUP ; Nname[12].src = QDW ; Nname[7].src = VLU; Nname[9].src = VLD; Nname[10].src = VLM; Nname[0].value = audio2.currentTime; Nname[0].max= audio2.duration; Nname[8].innerHTML= Math.floor(audio2.volume * 10) ; } audio2.addEventListener("timeupdate", function(){ DDp() }); function RangeChange(x){ audio2.currentTime=x;audio2.play(); } function FvolU(){audio2.volume = audio2.volume + 0.1 ; if(audio2.volume >0.9){audio2.volume=1}; DDp();} function Fvold(){audio2.volume = audio2.volume - 0.1 ; DDp();} function FItemsL(){Nname[13].selectedIndex--; if(Nname[13].selectedIndex == -1) {Nname[13].selectedIndex=Nname[13].options.length-1}; audio2.src = Nname[13].options[Nname[13].selectedIndex].value; audio2.load();audio2.play() ; } function FItemsA(){Nname[13].selectedIndex++; if(Nname[13].selectedIndex == -1) {Nname[13].selectedIndex=0}; audio2.src = Nname[13].options[Nname[13].selectedIndex].value; audio2.load();audio2.play() ; } function sToTime(t) { return padZero(parseInt((t / (60 * 60)) % 24)) + ":" + padZero(parseInt((t / (60)) % 60)) + ":" + padZero(parseInt((t) % 60)); } function padZero(v) { return (v < 10) ? "0" + v : v;} </script> <style> #audio22 img {width: 20px;height:16px;border: 1px outset gray;cursor:pointer; } #audio22 {text-align: center;vertical-align: middle;width: 200px;height:150px; background-color: #888;padding:8px 8px;border-radius: 20px 20px 20px 20px;box-shadow: 15px 15px 10px 0px rgba(20%,20%,40%,0.6);} </style>

00

<audio controls="controls" id="myVideo"> <source src="" type="audio/ogg"></source> <source src="http://219.76.13.186/mp32.9ku.com/upload/128/2018/02/24/876049.mp3" type="audio/mpeg"> </source> Your browser does not support the audio element. </audio> <br><input class="Bt" onclick="vid.play(); " type="button" value="play" /><input class="Bt" onclick="vid.pause();" type="button" value="pause" /><input class="Bt" onclick="vid.load(); " type="button" value="stop" /><input class="Bt" onclick="FMute(); " type="button" value="Mute sound" style="width: 130px;" /><input class="Bt" onclick="Floop(); " type="button" value="Enable loop" style="width: 130px;" /><br><input class="Bt" onclick="FvolU(); " type="button" value="vol +" style="width: 130px;" /><input class="Bt" onclick="FvolD(); " type="button" value="vol -" style="width: 120px;" /><input class="Bt" disabled type="button" value="j" style="width: 120px;" /><br><input class="Bt" onclick="Rate(1); " type="button" value="x1" /><input class="Bt" onclick="Rate(2); " type="button" value="x2" /><input class="Bt" onclick="Rate(5); " type="button" value="x5" /><br><input class="Bt" onclick="Rate(0.5); " type="button" value="0.5" /><input class="Bt" onclick="Rate(0.1); " type="button" value="0.1" /> <div class="Dp"></div><div class="Dp"></div><div class="Dp"></div><div class="Dp"></div> <script>var vid = document.getElementById("myVideo"); xx = document.querySelectorAll(".DP") xxx = document.querySelectorAll(".Bt") vid.onloadeddata = function(){ xx[0].innerHTML = "vid.duration : " + sToTime(vid.duration) + " ( " + vid.duration + " seconds)"; xx[1].innerHTML = "vid.currentTime: " + sToTime(vid.currentTime)+ "( " + vid.currentTime + " seconds)"; xx[2].innerHTML = "vid.currentSrc : " + vid.currentSrc; xx[3].innerHTML = "vid.ended: " + vid.ended; xxx[7].value = Math.floor(vid.volume * 10); } vid.addEventListener("timeupdate", function(){ xx[1].innerHTML = "vid.currentTime: " + sToTime(vid.currentTime)+ "( " + vid.currentTime + " seconds)"; xx[3].innerHTML = "vid.ended: " + vid.ended; xxx[7].value = Math.floor(vid.volume * 10); }); function FMute() { if(vid.muted == 0){xxx[3].value="Enable sound";vid.muted = 1 } else {xxx[3].value="Mute sound";vid.muted = 0 } } function Floop() { if(vid.loop == 0) {xxx[4].value="Disable loop";vid.loop = 1} else {xxx[4].value="Enable loop" ;vid.loop = 0} } function FvolU() { if(vid.volume < 1 ){vid.volume = vid.volume + 0.1} xxx[7].value = Math.floor(vid.volume * 10); } function FvolD() { if(vid.volume > 0.1 ){vid.volume = vid.volume - 0.1} xxx[7].value = Math.floor(vid.volume * 10); } function Rate(t) { x = vid.currentTime; vid.defaultPlaybackRate = t ; vid.load(); vid.currentTime = x; vid.play() } function sToTime(t) { return padZero(parseInt((t / (60 * 60)) % 24)) + ":" + padZero(parseInt((t / (60)) % 60)) + ":" + padZero(parseInt((t) % 60)); } function padZero(v) { return (v < 10) ? "0" + v : v;} </script> <style>.Dp{font-size: 20px ;} .Bt{font-size: 20px ;} </style>

00

實例	<audio id="myVideo" controls="controls"    屬性="值"  >            <source src="xxx.ogg" type="audio/ogg" />            <source src="xxx.mp3" type="audio/mpeg" />                  Your browser does not support the audio element. </audio>
方法	描述
addTextTrack()	向音頻添加新的文本軌道。
canPlayType()	檢查瀏覽器是否能夠播放指定的音頻類型。
fastSeek()	在音頻播放器中指定播放時間。
getStartDate()	返回新的 Date 對像，表示當前時間線偏移量。
load()	重新加載音頻元素。
play()	開始播放音頻。
pause()	暫停當前播放的音頻。

屬性	描述
audioTracks	返回表示可用音頻軌道的 AudioTrackList 對像。
autoplay	設置或返回是否在就緒（加載完成）後隨即播放音頻。
buffered	返回表示音頻已緩衝部分的 TimeRanges 對像。
controller	返回表示音頻當前媒體控制器的 MediaController 對像。
controls	設置或返回音頻是否應該顯示控件（比如播放/暫停等）。
crossOrigin	設置或返回音頻的 CORS 設置。
currentSrc	返回當前音頻的 URL。
currentTime	設置或返回音頻中的當前播放位置（以秒計）。
defaultMuted	設置或返回音頻默認是否靜音。
defaultPlaybackRate	設置或返回音頻的默認播放速度。
duration	返回音頻的長度（以秒計）。
ended	返回音頻的播放是否已結束。
error	返回表示音頻錯誤狀態的 MediaError 對像。
loop	設置或返回音頻是否應在結束時再次播放。
mediaGroup	設置或返回音頻所屬媒介組合的名稱。
muted	設置或返回是否關閉聲音。
networkState	返回音頻的當前網絡狀態。
paused	設置或返回音頻是否暫停。
playbackRate	設置或返回音頻播放的速度。
played	返回表示音頻已播放部分的 TimeRanges 對像。
preload	設置或返回音頻的 preload 屬性的值。
readyState	返回音頻當前的就緒狀態。
seekable	返回表示音頻可尋址部分的 TimeRanges 對像。
seeking	返回用戶當前是否正在音頻中進行查找。
src	設置或返回音頻的 src 屬性的值。
textTracks	返回表示可用文本軌道的 TextTrackList 對像。
volume	設置或返回音頻的音量。

#html audio#script audio