Latest web development tutorials

audio HTML (Audio)

Suono in HTML può giocare in diversi modi.


Problemi e soluzioni

Riprodurre l'audio in HTML non è facile!

Avete bisogno di un sacco di consigli familiari per garantire che i file audio in tutti i browser (Internet Explorer, Chrome, Firefox, Safari, Opera), e tutto l'hardware (PC, Mac, iPad, iPhone) possono essere riprodotti.

In questo capitolo, W3CSchool si riassumono i problemi e le soluzioni.


L'uso di plug-in

Browser plug-in è un'estensione del browser standard dispone di un piccolo programma per computer.

I plug-in possono utilizzare tag <object> o <embed> tag aggiunto alla pagina.

Queste etichette definiscono la risorsa (tipicamente risorse non HTML) del contenitore, a seconda del tipo, verranno visualizzati dal browser che viene visualizzata anche i plug-in esterni.


Utilizzando l'elemento <embed>

<Embed> tag definisce un contenuto contenitore esterno (non HTML). (Questo è un tag HTML5 in HTML4 è illegale, ma tutti i browser sono validi).

Il seguente frammento di codice in grado di visualizzare un file MP3 incorporato in una pagina web:

Esempi

<embed height="50" width="100" src="horse.mp3">

Prova »

problema:

  • <Embed> tag in HTML 4 non è valido. La pagina non può essere verificata da HTML 4.
  • Diversi browser supportano diversi formati audio per.
  • Se il browser non supporta il formato di file, nessun plug-in, quindi non è possibile riprodurre l'audio.
  • Se il computer dell'utente non è plug-in installato, non è possibile riprodurre l'audio.
  • Se il file viene convertito in altri formati, ancora non può giocare in tutti i browser.

Usa <object> elemento

<Tag Object> tag può anche essere definito al di fuori del contenuto (non HTML) contenitore.

Il seguente frammento di codice in grado di visualizzare un file MP3 incorporato in una pagina web:

Esempi

<object height="50" width="100" data="horse.mp3"></object>

Prova »

problema:

  • Diversi browser supportano diversi formati audio per.
  • Se il browser non supporta il formato di file, nessun plug-in, quindi non è possibile riprodurre l'audio.
  • Se il computer dell'utente non è plug-in installato, non è possibile riprodurre l'audio.
  • Se il file viene convertito in altri formati, ancora non può giocare in tutti i browser.

Utilizzare HTML5 <audio> elemento

HTML5 <audio> elemento è un elemento HTML5 in HTML 4 è ​​illegale, ma in tutti i browser sono validi.

Il <audio> elemento funziona in tutti i browser moderni.

Di seguito useremo il <audio> tag per descrivere i file MP3 (Internet Explorer, Chrome e Safari è efficace), ha aggiunto anche un tipi di file OGG (Firefox e browser Opera efficace). Se fallisce, viene visualizzato un errore il testo:

Esempi

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>

Prova »

problema:

  • <Audio> tag in HTML 4 non è valido. La pagina non può essere verificata da HTML 4.
  • È necessario convertire i file audio in diversi formati.
  • <Audio> elemento non funziona nei browser più vecchi.

Migliore soluzione HTML

L'esempio seguente utilizza due diversi formati audio. HTML5 <audio> elemento cerca di ogg a mp3 o audio. Se ciò non riesce, il codice tenterà di far ritirare <embed> elemento.

Esempi

<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>

Prova »

problema:

  • Devi essere convertito in un formato audio diverso.
  • <Embed> elemento non può essere rollback per visualizzare un messaggio di errore.

Yahoo Media Player - un modo semplice per aggiungere audio sul tuo sito

Player utilizzando Yahoo è gratuito. Per utilizzarlo, è necessario mettere questo JavaScript nella parte inferiore della pagina:

giocatore Yahoo può riprodurre file MP3 e vari altri formati. Hai solo bisogno di aggiungere una riga di codice alla vostra pagina o blog, si può facilmente rendere la vostra pagina HTML in una playlist professionale:

Esempi

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

Prova »

Se si desidera utilizzarlo, è necessario mettere questo JavaScript nella parte inferiore della pagina:

<script src="http://mediaplayer.yahoo.com/latest"></script>

Poi basta mettere un link per i file MP3 in formato HTML, JavaScript crea automaticamente il pulsante di riproduzione per ogni canzone:

<a href="song1.mp3"> Gioca Song 1 </a>
<a href="song2.wav"> Gioca Song 2 </a>
...
...

lettore multimediale Yahoo per gli utenti è un pulsante di riproduzione piccolo posto del giocatore completo. Tuttavia, quando si fa clic su questo pulsante si aprirà un giocatore completo.

Si noti che questo giocatore è sempre ancorata nella parte inferiore del telaio della finestra. Basta cliccare su di esso, è possibile far scorrere fuori.


utilizzando i collegamenti ipertestuali

Se la pagina contiene un collegamento ipertestuale che punta al file multimediali, la maggior parte dei browser usare "applicazione di supporto" per riprodurre il file.

Il frammento di codice seguente mostra i collegamenti ai file MP3. Se l'utente clicca sul link, il browser lancerà "applicazione di supporto" per riprodurre il file:

Esempi

<a href="horse.mp3">Play the sound</a>

Prova »


Descrizione Inline suono

Quando si include il suono in una pagina web, o come parte di una pagina web, si parla di suono in linea.

Se si prevede di utilizzare in linea i suoni nelle applicazioni web, è necessario rendersi conto che molte persone trovano in linea suono fastidioso. Si noti inoltre che gli utenti potrebbero aver chiuso l'opzione del browser suono in linea.

Il nostro miglior consiglio è di solo quando l'utente vuole sentire luoghi in linea sonore li contengono. Un esempio positivo è che quando l'utente ha bisogno di ascoltare la registrazione e cliccare su un link si aprirà la pagina e riprodurre la registrazione.


HTML tag multimediali

Nuovo: HTML5 nuova etichetta

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)