html动态网页添加音频
In principle, adding audio to a web page is quite straightforward. Assuming you have a standard mp3
file, just point the src
attribute of the audio
element to the file‘s location, just as you would in an img
tag:
原则上,将音频添加到网页非常简单 。 假设您有一个标准的mp3
文件,只需将audio
元素的src
属性指向该文件的位置即可,就像在img
标签中一样 :
<audio src="03-ghosts-I.mp3">
</audio>
使音频可见 (Making Audio Visible)
However, that code doesn‘t result in anything visible on the page. The controls
attribute must be added to the element to produce an audio control bar:
但是,该代码不会在页面上显示任何内容。 必须将controls
属性添加到元素以产生音频控制栏:
<audio src="03-ghosts-I.mp3" controls>
</audio>
The appearance of the control bar will differ between browsers, depending on the operating system. It‘s completely possible to craft your own UI for the audio element, but that requires writing some JavaScript.
在不同的浏览器中,控制栏的外观会有所不同,具体取决于操作系统。 完全可以为音频元素构建自己的UI ,但这需要编写一些JavaScript。
Note the lack of any value for the controls
attribute. controls
is an example of a “boolean” attribute: if the word controls
, by itself, is present in the audio
element, it has an effect; if not, the control bar is not shown. Formally, it’s also valid to write controls="controls"
, an approach that is still required when adding the attribute via JavaScript.
请注意,缺少controls
属性的任何值。 controls
是“布尔”属性的一个示例:如果audio
元素中单独存在controls
一词,则它具有效果; 如果不是, 则不显示控制栏。 正式