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一词，则它具有效果； 如果不是， 则不显示控制栏。 正式地，编写controls="controls"也是有效的， 通过JavaScript添加属性时仍然需要这种方法。

By default, the user should have the ability to start and stop the audio for themselves. Autoplaying and looping the audio file is possible, but should never, ever be used, outside of testing purposes during development:

默认情况下，用户应具有自行启动和停止音频的能力。 可以自动播放和循环播放音频文件，但在开发过程中出于测试目的， 绝对不能使用 ：

<audio src="03-ghosts-I.mp3" 
    controls autoplay loop>
</audio>

It’s also possible to set the embedded audio to silent using the muted attribute, and to set an initial volume level with a floating-point value between 0 and 1 for the volume attribute.

它也可以使用设置嵌入音频为静音muted属性，并设定为0和1之间的浮点值的初始音量volume属性。

For obvious reasons, setting the `volume` value for an audio element is independent from the volume settings that a user has on their own device.

出于显而易见的原因，为audio元素设置“音量”值与用户在自己的设备上设置的音量无关。

Bufffffering (Bufffffering)

Browsers will usually try to download a portion of the audio source before it is played by the user in order to assure smooth playback. This process, known as buffering, continues during playback, with the browser downloading audio data just ahead of the current time.

浏览器通常会在用户播放音频源之前尝试下载其一部分，以确保流畅播放。 此过程(称为缓冲 )在播放期间继续进行，浏览器仅在当前时间之前下载音频数据。

Buffering can be controlled using the preload attribute. preload has several possible values that act as suggestions for the browser:

可以使用preload属性控制缓冲。 preload具有几个可能的值，这些值可作为浏览器的建议 ：

• none: don’t retrieve any audio before playback is initiated.

  none ：在开始播放之前不检索任何音频。

• metadata: download the ID3 metadata associated with the file, such as track name and length, but don’t buffer the actual audio data.

  metadata ：下载与文件关联的ID3元数据，例如轨道名称和长度，但不缓冲实际的音频数据。

  metadata: download the ID3 metadata associated with the file, such as track name and length, but don’t buffer the actual audio data.

  metadata ：下载与文件关联的ID3元数据，例如轨道名称和长度，但不缓冲实际的音频数据。

• auto: download metadata and buffer some of the audio.

  auto ：下载元数据并缓冲一些音频。

auto is the default value for browsers, and doesn’t have to be specified in most cases. You may want to use a value of metadata if you expect a high volume of visits to your site. In principle, this should reduce the initial load of the page, but still provide information on the track:

auto是浏览器的默认值，在大多数情况下无需指定。 如果您期望访问大量站点，则可能需要使用metadata值。 原则上，这应该减少页面的初始负载，但仍然可以提供正轨上的信息：

<audio src="03-ghosts-I.mp3" controls
    preload="metadata">
</audio>

It is important to emphasize that these preload values are hints; the browser doesn’t have to follow them. For example, presented with a value of metadata, the browser may still buffer some audio, depending on network conditions.

需要强调的是，这些preload值只是提示 ； 浏览器不必遵循它们。 例如，在呈现metadata值的情况下，浏览器可能仍会缓冲某些音频，具体取决于网络状况。

You can determine if the browser has enough data to begin playback in two ways using JavaScript:

您可以使用JavaScript确定浏览器是否有足够的数据以两种方式开始播放：

1. Inspect the buffered read-only attribute, which contains a time range of the currently buffered audio data.

   检查buffered只读属性，该属性包含当前缓冲的音频数据的时间范围。

2. Wait for the canplay event to fire. canplay determines that there is enough buffered audio to begin playback.

   等待canplay事件触发。 canplay确定有足够的缓冲音频开始播放。

编解码器支持 (codec support)

After some back-and-forth, browsers have settled on mp3 as a standard for web audio. Its possible to use other audio codecs in your web page, although they don’t enjoy the complete support that mp3 enjoys. If you do decide to use another codec, you must include an mp3 file as a fallback for the audio element. For example, if you decided to use a flac file for it’s higher quality, the structure of the audio tag would change to:

经过一番反复之后，浏览器将mp3设置为Web音频的标准。 可以使用网页中的其他音频编解码器，尽管它们不享受mp3的全面支持。 如果确实决定使用其他编解码器，则必须包括一个mp3文件作为audio元素的后备。 例如，如果您决定使用flac文件来获得更高的质量，则audio标签的结构将更改为：

<audio controls>
    <source src="03-ghosts-I.flac"> 
    <source src="03-ghosts-I.mp3"> 
</audio>

As with the video element, the source options are written in order of preference: if the browser understands flac, it will use that file. Otherwise, the mp3 version will be played.

与video元素一样， source选项按优先顺序编写：如果浏览器理解flac ，它将使用该文件。 否则，将mp3版本。

标记音频 (Labelling audio)

There are many ways to present information about the track, but the most straightforward is to use a figure element:

呈现有关轨道信息的方法有很多，但是最直接的方法是使用figure元素 ：

<figure>
    <audio controls> 
        <source src="03-ghosts-I.mp3"> 
    </audio>
    <figcaption>Track 03, Ghosts I, Nine Inch Nails, used under Creative Commons</figcaption>
</figure>

辅助功能 (Accessibility)

The native audio element is quite accessible to users - one reason to carefully consider wether you actually need to build your own UI - but still needs a little work to accommodate those who may be hard of hearing.

用户可以轻松访问本机audio元素-仔细考虑您实际上是否需要构建自己的UI的一个原因-但仍需要一点工作来适应可能难以听清的用户。

If the audio content is a spoken work performance such as a speech, interview, or podcast, it makes sense to provide a transcript for the audio directly above or below the element.

如果音频内容是口头工作表演，例如演讲，访谈或播客，则在元素正上方或正下方提供音频抄本是有意义的。

For music, it’s a good practice to include a track inside the audio element to provide live subtitling for users who are hard of hearing.

对于音乐，将audio的track包含在内以为听觉不佳的用户提供实时字幕是一种很好的做法。

MIME类型 (MIME Types)

It is vital that your web hosting server deliver audio in a way that the browser will understand. Modern servers should deliver mp3 just fine, but adding the MIME type doesn’t hurt, and can help with newer codecs, such as flac:

Web托管服务器以浏览器能够理解的方式提供音频，这一点至关重要。 现代服务器应该可以很好地提供mp3 ，但是添加MIME类型并没有什么坏处，并且可以帮助开发新的编解码器，例如flac ：

<audio controls>
    <source src="03-ghosts-I.flac"      
        type="audio/flac">
    <source src="03-ghosts-I.mp3" 
        type="audio/mpeg">
</audio>

In addition, you can add the audio types to the .htaccess file of your site to force the correct MIME type:

此外，您可以将音频类型添加到站点的.htaccess文件中以强制使用正确的MIME类型：

AddType audio/flac .flac
AddType audio/mpeg .mp3

If you do the latter, there is no need to add a type attribute to each audio stream.

如果选择后者，则无需为每个音频流添加type属性。

结论 (Conclusion)

As you have seen, adding audio to a web page is quite straightforward: the issues usually lie in creating a small audio file with good quality to reduce bandwidth costs and load times.

如您所见，将音频添加到网页非常简单：问题通常在于创建高质量的小型音频文件以减少带宽成本和加载时间。

The audio element is ideal for playing back continuous audio tracks, such as music, interviews, and podcasts. It is not generally suited for cases where instant response or fine-grained control is needed, such as button sounds (although it can be done) and games. In those cases, developers usually turn to the Web Audio API.

audio元素非常适合播放连续的音轨，例如音乐，采访和播客。 它一般不适合于其中需要即时响应或细粒度控制的情况下，诸如按钮的声音(虽然它可以做到 )和游戏。 在这种情况下，开发人员通常会使用Web Audio API 。

翻译自: https://thenewcode.com/266/Add-Audio-to-a-Web-Page

html动态网页添加音频