Overview
Application scenarios: If you have installed the FVS plugin, you can view this chapter to learn about the functions related to FVS templates.
Note: Mobile devices are not supported.
Version
Report Server Version | JAR Package | Plugin Version |
11.0 | 2021/11/15 | Version 1.0.0 |
Application Scenarios
Automatically play background music when previewing the FVS big screen.
FVS realizes clicking a button to play/pause audio.
FVS triggers audio alarm when certain conditions are met.
Triggering Audio Manually
Preparing an Audio
After downloading the compressed package, unzip fanruan.zip and place the fanruan.mp3 file in the project path %FR_HOME%\webroot\help. As is shown in the figure below:
Creating a FVS Report
Click on the File > New FVS Report in the top left corner of the designer, as shown in the figure below:
Setting Page After-load Event
Click on Template > Page After-load Event in the top left corner, and enter the following JavaScript code:
"use document";
// create an audio tag for playing sound
const audio = document.createElement("audio");
audio.id = "audio";
// specify a mp3 file to play this mp3 file
audio.src = "/webroot/help/fanruan.mp3";
audio.loop = true; // set to loop play
document.body.appendChild(audio); // add the tag to the page, otherwise it cannot be played
Proceed as follows:
Setting a Title Component
Add a Title Component to the canvas, with the content setting to Play/Pause Audio. As is shown in the figure below:
Add a click interaction event of JavaScript script type to the title component to play or pause audio when the title component is clicked. The JavaScript code is as follows:
"use document";
audio = document.getElementById("audio");
//if the audio is not playing, click to play; if the audio is playing, click to pause
if(audio.paused){
audio.play();
}else{
audio.pause();
}Procedure as follows:
Downloading Template
Click to download the template: FVS Realizes Audio Play and Pause.fvs
Playing Audio Automatically
Some users want to play audio without any operation when previewing templates, but Google Chrome prohibits automatic audio play and requires manual modification of settings.
Setting up the Browser
On the browser settings page, select Privacy and security > Site settings > Additional content settings > Sound, and add the website address http://ip:port to Allowed to play sound.
Procedure as follows:
Modifying Template JS
Taking the manually trigger audio solution above as an example, you only need to add a line of code after the original JavaScript code of the page after-load event:
duchamp.getWidgetByName("Title1_Page1").trigger(); //Trigger the click event of the title component
After the template is loaded, trigger the click event of the 'Title 1_Page 1' component immediately to achieve the effect of automatic audio play.
As is shown in the figure below:
