FVS實現音頻播放與暫停

適用場景：安裝了「FineVis數據可視化」插件的使用者，可參考本文了解 FVS 範本製作。

1.1 版本

1.2 應用場景

• 預覽 FVS 範本時，自動播放背景音樂。

• FVS 實現點選按鈕播放/暫停音頻。

• FVS 實現滿足某種條件時，觸發音頻警報。
  

2.1 準備音頻

下載壓縮包後解壓 fanruan.zip ，將 fanruan.mp3 檔案放置在工程路徑 %FR_HOME%\webroot\help 下。如下圖所示：

2.2 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，可自訂名稱和尺寸。如下圖所示：

2.3 設定頁面載入結束事件

點選左上角「範本>頁面載入結束事件」，輸入 JavaScript 代碼如下：

"use document";
// 建立一個 audio 標簽用於播放聲音
const audio = document.createElement("audio");
audio.id = "audio";
// 指定一個 mp3 檔案，用來播放此 mp3 檔案
audio.src = "/webroot/help/fanruan.mp3";
audio.loop = true;// 設定為循環播放
document.body.appendChild(audio);// 將標簽新增到頁面上，否則無法播放

步驟如下圖所示：

2.4 設定標題組件

向畫布中新增一個「標題組件」，內容設定為「播放/暫停音頻」。如下圖所示：

給標題組件新增一個「JavaScript 腳本」型別的點選交互事件，實現點選標題組件播放或暫停音頻。JavaScript 代碼如下：

"use document";
audio = document.getElementById("audio");
//若音頻未播放，點選播放；若音頻播放，點選暫停
if(audio.paused){
    audio.play();
}else{
    audio.pause();
}

步驟如下圖所示：

2.5 範本下載

注：手動觸發音頻支援行動端。

點選下載範本：FVS實現手動觸發音頻.fvs

有些使用者需求是在預覽範本時不進行任何操作即可實現音頻自動播放，但谷歌瀏覽器禁止了自動播放音頻，需要手動修改設定。

3.1 設定瀏覽器

在瀏覽器設定頁面選擇「隱私權和安全性>網站設定>其他內容設定>音訊」，在「可以播放音效」處新增網站位址 http://ip:埠。

步驟如下所示：

3.2 修改範本JS

以上述手動觸發音頻的方案為例，只需要在「頁面載入結束事件」原有 JavaScript 代碼後增加一句代碼：

duchamp.getWidgetByName("標題1_頁面1").trigger(); //觸發標題組件點選事件

使範本在初始載入結束後，立即觸發「標題1_頁面1」組件的點選事件，實現自動播放音頻的效果。

如下圖所示：