I.Problem description
When designing a report, how to add sound playback, background music, or realize sound warning to the report?
II.Solution
Use HTML5 <audio> tag
Currently, the audio element supports three audio formats:
| IE9 | Firefox3.5 | Opera10.5 | Chrome3.0 | Safari3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| Mp3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
The attributes of the <audio> tag
| Attributes | Value | Description |
|---|---|---|
| autoplay | autoplay | If this attribute is present, the audio will play as soon as it is ready |
| controls | controls | If this property is present, the user will be shown controls, such as a play button |
| loop | loop | If this attribute is present, the playback will restart whenever the audio ends |
| preload | preload | If this attribute is present, the audio is loaded when the page loads and is ready to play If "autoplay" is used, the attribute is ignored |
| src | src | URL of the audio to be played |
III.Resolution steps
1) Add the following code in cell A1
<audio src="http://www.w3school.com.cn/i/song.ogg" controls="controls" loop="loop"> Your browser does not support the audio element. </audio>
2) Use HTML to display content in cell attributes
3) Save and preview, the effect is as follows (the display effect of different browsers is different)
4) If you want to do warnings and other operations, first add the id attribute to the <audio> tag, such as: add id="music1" to the code of cell A1
<audio src="http://www.w3school.com.cn/i/song.ogg" controls="controls" loop="loop" id="music1"> Your browser does not support the audio element. </audio>
5) Click Template>Web Attributes>Pagination Preview(select the setting mode according to your own preview mode), choose Individually set for the template, and then add the Load end event, as shown in the figure below.
(In actual use, you can set the playback after judging a certain value to achieve the warning effect)
var ms=document.getElementById('music1');
ms.play();
//ms.pause();
6) Save and preview, it will play automatically.
IV.Mobile effect
Does not support this effect.
Previous：Flash animation displayed in cell
