jquery控制背景音樂開關與自動播放提示音的方法

jquery控制背景音樂開關與自動播放提示音的方法_jquery

WBOY

發布： 2016-05-16 16:15:23

原創

2781 人瀏覽過

本文實例講述了jquery控制背景音樂開關與自動播放提示音的方法。分享給大家供大家參考。具體如下：

很多人初學網頁製作時在網頁中加入一段背景音樂，聽到音樂響起的那一刻往往都會有一絲的成就感。

這裡就為大家講解如何使用js控制背景音樂播放與停止。具體如下：

一、jquery控制背景音樂開關

複製代碼代碼如下:

//W3C/1. //EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

關閉背景音樂

以上介紹了jquery如何控制背景音樂開關的方法，接下來再進一步擴展。

二、JQuery自動播放提示音

最早對網站有自動提示音的功能，發現在Discuz論壇中出現。但它有一個問題就是只支援flash，不支援HTML5，不明確最新版本是否支援HTML5。

對於Discuz 7.2 版本中，提供了player.swf、pm_1.mp3、pm_2.mp3、pm_3.mp3，然後使用以下腳本來實作:

複製程式碼程式碼如下:

可惜這個方法侷限在flash，在蘋果設備上可能就會遇到麻煩了。

HTML5開源播放器JPlayer支援自動播放提示音
JPlayer支援play事件觸發自動播放提示音。

1. 裝載JPlayer到一個div層，例如#jplayer。

複製程式碼程式碼如下:

$(function() { 

    $("#jplayer").jPlayer({ 

      swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf", 

      ready: function () { 

        $(this).jPlayer("setMedia", { 

          mp3: "./resources/message.mp3" 

        }); 

      }, 

      supplied: "mp3" 

    }); 

});

body部分加入:

裝載JQuery完成後，jplayer的div內容在支援swf的瀏覽器內變成:

複製程式碼程式碼如下:

在支援HTML5的瀏覽器內變成:

複製程式碼程式碼如下:

完成裝載後就是觸發播放的事件了。

2. 觸發播放提示音事件

複製程式碼程式碼如下:

$("#jplayer").jPlayer('play');

3. 循環播放函數，每5秒播放一次提示音

複製程式碼

程式碼如下:

function PlaySound() { 

    $("#jplayer").jPlayer('play'); 

    setInterval("PlaySound()", 5000); 

    return true;

}

附錄:

1. 解決無法自動播放提示音的問題

如果在載入JQplayer後，立刻運行播放的觸發事件，沒有任何效果!具體是什麼原因我也不太清楚，估計是因為音頻文件沒有加載上。

2. 解決方法是讓觸發事件等待5秒執行。

複製程式碼

程式碼如下:

setTimeout("$('#jplayer').jPlayer('play')" , 5000);

載入完頁面，5秒後自動播放提示音。

希望本文所述對大家的jquery程式設計有所幫助。