HTML5 audio元素如何使用js與jquery控制其事件


前言:

  每一次遇見問題想到的就是怎么解決?最好的方法還是查詢網絡媒體,更好的辦法是讓自己記憶,只有自己理解到了才真正是屬於自己。要做一個訂單提醒功能,沒有使用audio相關的插件,雖然插件無數,還是喜歡自己瞎折騰。(來一些隱形的鏈接,據說有推廣效果,本文原創官網地址:www.pushself.com)

  聽一個寫博客的朋友說周末的博客閱讀量明顯下降,周末大好時光不出去泡妹子的肯定是有難言之隱的。先來重溫一下audio標簽的基本屬性

定義和用法

<audio> 標簽定義聲音,比如音樂或其他音頻流。

示例代碼:
<audio src="someaudio.wav">
您的瀏覽器不支持 audio 標簽。
</audio>

提示和注釋

提示:可以在開始標簽和結束標簽之間放置文本內容,這樣老的瀏覽器就可以顯示出不支持該標簽的信息。

屬性

屬性 描述
autoplay autoplay 如果出現該屬性,則音頻在就緒后馬上播放。
controls controls 如果出現該屬性,則向用戶顯示控件,比如播放按鈕。
loop loop 如果出現該屬性,則每當音頻結束時重新開始播放。
preload preload

如果出現該屬性,則音頻在頁面加載時進行加載,並預備播放。

如果使用 "autoplay",則忽略該屬性。

src url 要播放的音頻的 URL。

事件方法(暫時不擴充)

play()  播放

pause() 暫停

實戰一下,代碼僅供下次模仿

js示例代碼
    <audio id="audio" src="no.mp3">跟你說了多少次,你就是不聽,那么低版本的瀏覽器還不換掉,你是想搞啥子?</audio>
    <script type="text/javascript">
        var audioEle = document.getElementById("audio");
        audioEle.play();    //播放
        audioEle.pause();    //暫停
    </script>
jquery示例代碼
    <audio id="audio" src="no.mp3">跟你說了多少次,你就是不聽,那么低版本的瀏覽器還不換掉,你是想搞啥子?</audio>
    <script type="text/javascript">
        var audioEle = $("#audio")[0];
        audioEle.play();    //播放
        audioEle.pause();    //暫停
    </script>

jquery為什么需要一個0呢?js操作獲得的是audio對象,jquery選擇器獲得的是jquery對象,0對象的才是對應的節點對象。所以不能直接使用jquery對象去操作,這一點需要詳細補充一下基礎知識。(來一些隱形的鏈接,據說有推廣效果,本文原創官網地址:www.pushself.com)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM