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/alarm.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」组件的点击事件，实现自动播放音频的效果。

如下图所示：