當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html5 audio音频播放器

發(fā)布時(shí)間：2023/12/20 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 html5 audio音频播放器小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

html5開啟了一個(gè)新時(shí)代，因?yàn)樗尀g覽器本身變得不那么被動(dòng)，audio api就是一個(gè)典型的列子，在html5還沒確定之前，如果想要在網(wǎng)頁上聽音樂看視頻唯一的辦法就是用flash
意思是當(dāng)你沒有給瀏覽器裝載Flash插件的話那么音樂視頻即是空談，html5 audio的出現(xiàn)改變了這一格局，因?yàn)槟憧梢圆挥肍lash插件就可以聽音樂看視頻，當(dāng)然這些能否實(shí)現(xiàn)

文章結(jié)構(gòu)

1.audio的概念以及屬性和方法
2.audio的一些事件
3.完整的音頻播放頁面代碼

詳

1.html5 audio的語法以及屬性和方法
使用語法
<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">親您的瀏覽器不支持html5的audio標(biāo)簽</audio>
屬性
src??是歌曲的路徑
controls??播放控制如果給標(biāo)簽里寫了 controls="controls" 那么網(wǎng)頁會(huì)顯示audio自帶的播放控件，如果沒寫就不會(huì)顯示.
loop?歌曲循環(huán) 在標(biāo)簽里添加該屬性歌曲循環(huán) 如果你的歌曲是從后臺(tái)調(diào)取的的也可以在ajax里設(shè)置 loop=true/false來控制;
autoplay?當(dāng)歌曲加載后自動(dòng)播放，但是只有pc端可以實(shí)現(xiàn) 移動(dòng)端不行(pc端的瀏覽器要比移動(dòng)端的完善很多，對有些屬性支持也會(huì)好很多)
以上是標(biāo)簽內(nèi)的屬性當(dāng)然也可以作為對象屬性來調(diào)取控制auido.*

audio不單單是個(gè)標(biāo)簽他也是window下的一個(gè)對象，對象就有屬性和方法，作為對象他有哪些常用的方法呢
對象屬性：
currentTime?獲取當(dāng)前播放時(shí)間
duration?獲取歌曲的總時(shí)間
play?是否在播放返回true/false
pause?是否暫停返回true/false
對象方法：
play()?播放歌曲
pause()?暫停歌曲
load()重新加載歌曲

以上這些屬性和方法只是audio最常用的一部分，也是今天的demo里面要用到的，如果想了解更多關(guān)于audio的屬性和方法可以去w3shool看下 http://www.w3school.com.cn/jsref/dom_obj_audio.asp

2.html5 audio的一些事件
play?播放事件可判斷歌曲是否正在播放中
pause?暫停事件判斷歌曲是否暫停
loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。（這些事件在加載過程中是按以上順序觸發(fā)的）
以上這些事件可以通過事件監(jiān)聽對其做相應(yīng)處理

3.完整的html5 audio音頻播放頁面

<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/><link rel="shortcut icon" href="img/logo.png"><title>html5 audio音頻播放</title><style>*{ margin: 0; padding:0;}body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: "微軟雅黑"}h1{ width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; }#audio{ width: 100%;}#control{ width: 150px; height: 150px; line-height: 150px; text-align: center; border-radius: 200px; border:none; color:#fff; margin-top: -75px; margin-left:-75px; left:50%; top:50%; position: absolute; box-shadow: #888 0 0 8px;}.color_gray{ background: #e4e4e4}.hide{ display: none;}.show{ display: block;}.play{ background: #f06060;}.pause{ background:skyblue}/*進(jìn)度條樣式*/.progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;}.progressBar div{ position: absolute;}.progressBar .progressBac{ width: 100%; height: 10px; left: 0; top:0; background: #e4e4e4;}.progressBar .speed{width: 100%; height: 10px; left: -100%; background: #f06060; }.progressBar .drag{ width: 30px; height: 30px; left: 0; top:-10px; background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;}/*時(shí)間樣式*/#time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;}.tiemDetail{ position: absolute; right:10px; top:0;}#songInfo{overflow: hidden; width: 200px; height:50px; line-height: 50px; text-align: center; color:#34495e; margin-top: -25px; margin-left:-100px; left:50%; top:70%; position: absolute;}.shareImg{ position: absolute; left: 100000px;}</style><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script>$(function() {getSong();})//獲取歌曲鏈接并插入dom中function getSong() {var audio = document.getElementById("audio");audio.src = "test.mp3";var str = audio.src;var filename = str.substring(str.lastIndexOf("/")+1,str.length);document.getElementById("songInfo").innerHTML = filename;audio.loop = true; //歌曲循環(huán)playCotrol(); //播放控制函數(shù)}//點(diǎn)擊播放/暫停function clicks() {var audio = document.getElementById("audio");$("#control").click(function() {if ($("#control").hasClass("play")) {$("#control").addClass("pause").removeClass("play");audio.play();//開始播放dragMove();//并且滾動(dòng)條開始滑動(dòng)$("#control").html("暫停播放");} else {$("#control").addClass("play").removeClass("pause");$("#control").html("點(diǎn)擊播放");audio.pause();}})}//播放時(shí)間function timeChange(time, timePlace) {//默認(rèn)獲取的時(shí)間是時(shí)間戳改成我們常見的時(shí)間格式var timePlace = document.getElementById(timePlace);//分鐘var minute = time / 60;var minutes = parseInt(minute);if (minutes < 10) {minutes = "0" + minutes;}//秒var second = time % 60;seconds = parseInt(second);if (seconds < 10) {seconds = "0" + seconds;}var allTime = "" + minutes + "" + ":" + "" + seconds + ""timePlace.innerHTML = allTime;}//播放事件監(jiān)聽function playCotrol() {audio.addEventListener("loadeddata", //歌曲一經(jīng)完整的加載完畢( 也可以寫成上面提到的那些事件類型)function() {$("#control").addClass("play").removeClass("color_gray");$("#control").html("點(diǎn)擊播放");addListenTouch(); //歌曲加載之后才可以拖動(dòng)進(jìn)度條var allTime = audio.duration;timeChange(allTime, "allTime");setInterval(function() {var currentTime = audio.currentTime;$("#time .currentTime").html(timeChange(currentTime, "currentTime"));}, 1000);clicks();}, false);audio.addEventListener("pause",function() { //監(jiān)聽暫停$("#control").addClass("play").removeClass("pause");$("#control").html("點(diǎn)擊播放");if (audio.currentTime == audio.duration) {audio.stop();audio.currentTime = 0;}}, false);audio.addEventListener("play",function() { //監(jiān)聽暫停$("#control").addClass("pause").removeClass("play");$("#control").html("暫停播放");dragMove();}, false);audio.addEventListener("ended", function() {alert(0)}, false)}//進(jìn)度條//這里我用的是事件實(shí)現(xiàn)進(jìn)度拖動(dòng) 如果不太熟悉touch的可以看下我之前寫的一個(gè)小demo http://www.cnblogs.com/leinov/p/3701951.htmlvar startX, x, aboveX = 0; //觸摸時(shí)的坐標(biāo) //滑動(dòng)的距離 //設(shè)一個(gè)全局變量記錄上一次內(nèi)部塊滑動(dòng)的位置//1拖動(dòng)監(jiān)聽touch事件function addListenTouch() {document.getElementById("drag").addEventListener("touchstart", touchStart, false);document.getElementById("drag").addEventListener("touchmove", touchMove, false);document.getElementById("drag").addEventListener("touchend", touchEnd, false);var drag = document.getElementById("drag");var speed = document.getElementById("speed");}//touchstart,touchmove,touchend事件函數(shù)function touchStart(e) {e.preventDefault();var touch = e.touches[0];startX = touch.pageX;}function touchMove(e) { //滑動(dòng)e.preventDefault();var touch = e.touches[0];x = touch.pageX - startX; //滑動(dòng)的距離//drag.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以用css3的方式drag.style.left = aboveX + x + "px"; //speed.style.left = -((window.innerWidth) - (aboveX + x)) + "px";}function touchEnd(e) { //手指離開屏幕e.preventDefault();aboveX = parseInt(drag.style.left);var touch = e.touches[0];var dragPaddingLeft = drag.style.left;var change = dragPaddingLeft.replace("px", "");numDragpaddingLeft = parseInt(change);var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;//30是拖動(dòng)圓圈的長度，減掉是為了讓歌曲結(jié)束的時(shí)候不會(huì)跑到window以外audio.currentTime = currentTime;}//3拖動(dòng)的滑動(dòng)條前進(jìn)function dragMove() {setInterval(function() {drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + "px";speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + "px";}, 500);}</script></head> <body><h1>html5 audio 音頻播放demo</h1> <audio id="audio" src="" loop="loop" autoplay="autoplay" ></audio>  <button id="control" class="">loading</button>  <section class="progressBar"><div class="progressBac"></div><div class="speed" id="speed"></div><div class="drag" id="drag"></div> </section>  <div id="time"><div class="tiemDetail"><span class="currentTime" id="currentTime">00:00</span>/<span class="allTime" id="allTime">00:00</span></div> </div>   <div id="songInfo">沒時(shí)間-Leinov<div class="shareImg"><img src="img/html5audio.jpg" alt=""></div> </div> </body> </html>

自行更換播放資源：

總結(jié)

以上是生活随笔為你收集整理的html5 audio音频播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： html表单实验总结,html表单知识的
下一篇：操作系统—— I/O 相关知识