1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
|
---
title: audio
slug: Web/HTML/Element/Audio
translation_of: Web/HTML/Element/audio
---
<h2 id="Sumário">Sumário</h2>
<p>O elemento <code>audio</code> é utilizado para embutir conteúdo de som em um documento HTML ou XHTML.O elemento <code>audio</code> foi adicionado como parte do HTML5.</p>
<p>Você pode utilizar recursos avançados da API de áudio — que são específicas do Gecko — para gerar e manipular diretamente fluxo de áudio a partir do código JavaScript. Veja <a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="en-US/docs/Introducing the Audio API Extension">Introducing the audio API extension</a> para detalhes.</p>
<h2 id="Contexto_de_Uso">Contexto de Uso</h2>
<table class="standard-table">
<tbody>
<tr>
<td>Conteúdo permitido</td>
<td><a href="/en-US/docs/HTML/Content_categories#transparent_content" title="en-US/docs/HTML/Content categories#transparent content">Transparent content</a>, tanto um atributo <code>src</code> quanto um ou mais elementos {{ HTMLElement("source") }}, seguidos por um <a href="/en-US/docs/HTML/Content_categories#flow_content" title="en-US/docs/HTML/Content categories#flow content">flow content</a> ou <a href="/en-US/docs/HTML/Content_categories#phrasing_content" title="en-US/docs/HTML/Content categories#phrasing content">phrasing content</a>, sem{{ HTMLElement("video") }} ou elementos <code><audio></code>.</td>
</tr>
<tr>
<td>Omissão de tag</td>
<td>Nenhuma, tanto as tags iniciais quanto as finais devem estar presentes.</td>
</tr>
<tr>
<td>Elementos pai permitidos</td>
<td>Qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#flow_content" rel="internal">flow content</a>, ou qualquer elemento que aceite <a href="/en-US/docs/HTML/Content_categories#phrasing_content" rel="internal">phrasing content</a>.</td>
</tr>
<tr>
<td>Documento normativo</td>
<td><a class="external" href="http://www.w3.org/TR/html5/video.html#audio">HTML5, section 4.8.7</a></td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Como todos os elementos HTML, este elemento suporta os <a href="/en-US/docs/HTML/Global_attributes" title="en-US/docs/HTML/Global attributes">global attributes</a>.</p>
<dl>
<dt>{{ htmlattrdef("autoplay") }}</dt>
<dd>Um atributo Booleano; se especificado (mesmo se o valor for "false"!), o áudio iniciará automaticamente assim que possível sem parar de carregar os dados.</dd>
<dt>{{ htmlattrdef("autobuffer") }} {{ obsolete_inline("2.0") }}</dt>
<dd>Um atributo Booleano; se especificado, o audio será baixado automaticamente, mesmo se não está configurado para reprodução automática. Isto continua até que o cache de mídia esteja cheio, ou até que o o arquivo de áudio completo tenha sido baixado, o que vier primeiro. Isto deve ser utilizado apenas quando é esperado que o usuário escolherá tocar o áudio; por exemplo, se o usuário navegou para a página utilizando um link "Reproduzir". Este atributo foi removido no Gecko 2.0 {{ geckoRelease("2.0") }} em razão do atributo <code>preload</code>.</dd>
<dt>{{ htmlattrdef("buffered") }}</dt>
<dd>Um atributo que pode ser lido para determinar os intervalos do áudio que já foram carregados. Este atributo contém um objeto {{ domxref("TimeRanges") }}.</dd>
<dt>{{ htmlattrdef("controls") }}</dt>
<dd>Se esse atributo estiver presente, o navegador oferecerá controles para permitir ao usuário controlar a reprodução do áudio, incluindo volume, navegação, e pausa/continuação da reprodução.</dd>
<dt>{{ htmlattrdef("loop") }}</dt>
<dd>Um atributo Booleano; se especificado, ao chegar no fim do áudio, ele voltará automaticamente para o começo.</dd>
<dt>{{ htmlattrdef("mozCurrentSampleOffset") }} {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}</dt>
<dd>The offset, specified as the number of samples since the beginning of the audio stream, at which the audio is currently playing.</dd>
<dt>{{ htmlattrdef("muted") }}</dt>
<dd>Um atributo Booleano que indica se o áudio será inicializado silenciado.</dd>
<dt>{{ htmlattrdef("played") }}</dt>
<dd>Um objeto {{ domxref("TimeRanges") }}indicando que todo o áudio foi reproduzido.</dd>
<dt>{{ htmlattrdef("preload") }}</dt>
<dd>Esse atributo enumerado pretende dar uma sugestão ao navegador sobre o que o autor pensa que proporcionará uma melhor experiência do usuário. Ele pode ter os seguintes valores:
<ul>
<li><span style="font-family: Courier New;">none: </span>indica que o usuário não necessitará consultar o áudio ou que o servidor quer minimizar seu tráfego; em outros termos indica que o áudio não deve ser pré-carregado;</li>
<li><span style="font-family: Courier New;">metadata</span>: indica que embora o usuário não necessitará consultar o áudio, pegar os meta-dados (ex: comprimento) é interessante;</li>
<li><span style="font-family: Courier New;">auto</span>: indica que o usuário necessita ter prioridade; em outros termos isso significa que, se necessário, o áudio inteiro pode ser baixado, mesmo que não seja esperado a execução;</li>
<li>Uma <em>string vazia</em>: é um sinônimo do valor <span style="font-family: Courier New;">auto</span>.</li>
</ul>
<p>Se não definido, seu valor padrão será definido pelo navegador (isto é, cada navegador pode escolher seu valor padrão), embora a especificação recomenda que seja definido para o <span style="font-family: Courier New;">metadata</span>.</p>
<div class="note"><strong>Notas de uso:</strong>
<ul>
<li>O atributo <code>autoplay</code> tem precedência sobre o <code>preload,</code>pois se é necessário executar o áudio automaticamente, o navegador obviamente o baixará. Definindo ambos <code>autoplay</code> e <code>preload</code> é permitido pela especificação.</li>
<li>O navegador não é forçado pela especifição a seguir o valor desse atributo; é apenas uma sugestão.</li>
</ul>
</div>
</dd>
<dt>{{ htmlattrdef("src") }}</dt>
<dd>A URL do áudio a ser incorporado. Isso é sujeito a <a class="internal" href="/en-US/docs/HTTP_access_control" title="en-US/docs/HTTP access control">HTTP access controls</a>. Isto é opcional; ao invés disso você pode usar o elemento <code><a class="external" href="http://developer.mozilla.org/en-US/docs/pt-BR/HTML/Element/source"><source></a></code> dentro do bloco do áudio para especificar o vídeo a ser incorporado .</dd>
</dl>
<p>O tempo de compensação (time offset) entre o áudio e o vídeo está especificado como um valor de ponto flutuante (float) representando o número de segundos da compensação.</p>
<div class="note"><strong>Nota:</strong> A definição de valor de tempo de compensação ainda não foi completada na especificação do HTML 5 e está sujeita a mudança.</div>
<h2 id="Examples">Examples</h2>
<pre class="brush: html"><!-- Reprodução simples de áudio -->
<audio src="https://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
O seu navegador não suporta o elemento <code>audio</code>.
</audio>
<!-- Reprodução de áudio com legendas -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
</pre>
<p>Reproduz o arquivo de áudio anexado a esse artigo.</p>
<h2 id="Interface_do_DOM">Interface do DOM</h2>
<ul>
<li><a href="/en-US/docs/DOM/HTMLAudioElement" title="en-US/docs/DOM/HTMLAudioElement">HTMLAudioElement</a></li>
</ul>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte Básico</td>
<td>3.0</td>
<td>{{ CompatGeckoDesktop("1.9.1") }}</td>
<td>9.0</td>
<td>10.5</td>
<td>3.1</td>
</tr>
<tr>
<td>
<p>Atributo<code> autoplay</code></p>
</td>
<td>3.0</td>
<td>{{ CompatGeckoDesktop("1.9.1") }}</td>
<td>9.0</td>
<td>10.5</td>
<td>3.1</td>
</tr>
<tr>
<td>
<p>Atributo<code> buffered</code></p>
</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoDesktop("2.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Atributo <code>controls</code></td>
<td>3.0</td>
<td>{{ CompatGeckoDesktop("1.9.1") }}</td>
<td>9.0</td>
<td>10.5</td>
<td>3.1</td>
</tr>
<tr>
<td>Atributo <code>loop</code></td>
<td>3.0</td>
<td>{{ CompatGeckoDesktop("11.0") }}</td>
<td>9.0</td>
<td>10.5</td>
<td>3.1</td>
</tr>
<tr>
<td>Atributo <code>muted</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoDesktop("11.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Propriedade <code>played</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoDesktop("15.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Atributo<code> preload</code></td>
<td>3.0</td>
<td>{{ CompatGeckoDesktop("2.0") }}</td>
<td>9.0</td>
<td>Supported under the older name <code>autobuffer</code></td>
<td>3.1</td>
</tr>
<tr>
<td>Atributo <code>src</code></td>
<td>3.0</td>
<td>{{ CompatGeckoDesktop("1.9.1") }}</td>
<td>9.0</td>
<td>10.5</td>
<td>3.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte Básico</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Atributo <code>autoplay</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Atributo <code>buffered</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("2.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Atributo <code>controls</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Atributo <code>loop</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("11.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Atributo <code>muted</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("11.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Propriedade <code>played</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("15.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Atributo <code>preload</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("2.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Atributo <code>src</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<div class="note"><strong>Nota:</strong> Para que o Gecko reproduza o áudio, o servidor deve disponibilizar o arquivo utilizando o tipo MIME correto.</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a class="internal" href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="en-US/docs/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li>
<li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="en-US/docs/Introducing the Audio API Extension">Introducing the audio API extension</a></li>
<li><a href="/en-US/docs/DOM/HTMLAudioElement" title="en-US/docs/DOM/HTMLAudioElement"><code>HTMLAudioElement</code></a></li>
<li><a class="internal" href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en-US/docs/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
<li><a class="internal" href="http://developer-new.mozilla.org/pt-BR/docs/HTML/Element/Video" title="pt-BR/docs/HTML/Element/Video"><code>video</code></a></li>
<li><a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video" title="en-US/docs/Using audio and video in Firefox">Using audio and video</a></li>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#audio">The <code>audio</code> element</a> (Especificação HTML5)</li>
</ul>
|