Latest web development tutorials

HTML-Audio (Audio)

Ton in HTML kann auf verschiedene Arten spielen.


Probleme und Lösungen

Spielen Sie Audio in HTML ist nicht einfach!

Sie benötigen viele bekannte Tipps, um sicherzustellen, dass Ihre Audio-Dateien in allen Browsern (Internet Explorer, Chrome, Firefox, Safari, Opera) und alle Hardware (PC, Mac, iPad, iPhone) abgespielt werden können.

In diesem Kapitel werden die Probleme und Lösungen W3CSchool Sie zusammenfassen.


Der Einsatz von Plug-in

Browser-Plug-in ist eine Erweiterung des Standard-Browsers ein kleines Computerprogramm verfügt.

Plug-Ins können Sie mit <object> -Tag oder <embed> -Tag der Seite hinzugefügt.

Diese Etiketten definieren die Ressource (in der Regel Nicht-HTML-Ressourcen) Behälter, je nach Art, werden sie vom Browser angezeigt werden, die auch von den externen Plug-Ins angezeigt wird.


Mit der <embed> Element

<Embed> Tag definiert einen externen Behälter (nicht HTML) Inhalt. (Dies ist eine HTML5-Tags in HTML 4 illegal ist, aber alle Browser sind gültig).

Das folgende Codefragment kann eine MP3-Datei in eine Webseite eingebettet anzuzeigen:

Beispiele

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

Versuchen »

Problem:

  • <Embed> -Tag in HTML 4 ist ungültig. Die Seite kann nicht von HTML 4 überprüft werden.
  • Verschiedene Browser unterstützen verschiedene Audio-Formate für.
  • Falls Ihr Browser nicht das Dateiformat unterstützt, keine Plug-Ins, dann können Sie nicht den Ton wiederzugeben.
  • Wenn der Computer des Benutzers nicht-Plug in installiert haben, können Sie keine Audio spielen.
  • Wenn die Datei in andere Formate umgewandelt wird, kann immer noch nicht alle Browser spielen in.

Mit <object> Element

<Objekt tag> Tag kann auch außerhalb des Behälters (nicht HTML) Inhalt definiert werden.

Das folgende Codefragment kann eine MP3-Datei in eine Webseite eingebettet anzuzeigen:

Beispiele

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

Versuchen »

Problem:

  • Verschiedene Browser unterstützen verschiedene Audio-Formate für.
  • Falls Ihr Browser nicht das Dateiformat unterstützt, keine Plug-Ins, dann können Sie nicht den Ton wiederzugeben.
  • Wenn der Computer des Benutzers nicht-Plug in installiert haben, können Sie keine Audio spielen.
  • Wenn die Datei in andere Formate umgewandelt wird, kann immer noch nicht alle Browser spielen in.

Verwenden Sie HTML5 <audio> -Element

HTML5 <audio> -Element ist ein HTML5-Element in HTML 4 ist illegal, aber in allen Browsern sind gültig.

Das <audio> -Element funktioniert in allen modernen Browsern.

Im Folgenden das <audio> Tag verwenden, werden die MP3-Dateien (Internet Explorer, Chrome und Safari ist wirksam) zu beschreiben, fügte auch eine OGG-Dateitypen (Firefox und Opera-Browser effektiv). Wenn es fehlschlägt, wird ein Fehler angezeigt Text:

Beispiele

<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>

Versuchen »

Problem:

  • <Audio> -Tag in HTML 4 ist ungültig. Ihre Seite kann nicht von HTML 4 überprüft werden.
  • Sie müssen Audio-Dateien in verschiedene Formate konvertieren.
  • <Audio> Element funktioniert nicht in älteren Browsern.

Beste HTML-Lösung

Das folgende Beispiel verwendet zwei verschiedene Audio-Formate. HTML5 <audio> -Element versucht ogg zu mp3 oder Audio zu spielen. Wenn dies nicht gelingt, versucht der Code rückgängig zu machen <embed> Element.

Beispiele

<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>

Versuchen »

Problem:

  • Sie müssen in ein anderes Audio-Format umgewandelt werden.
  • <Embed> Element kann nicht einen Fehler anzeigen Nachricht zurückgerollt werden.

Yahoo Media Player - eine einfache Möglichkeit, Audio auf Ihrer Website hinzufügen

Spieler Yahoo Verwendung ist kostenlos. Um es zu nutzen, müssen Sie dieses JavaScript in den unteren Rand der Seite zu setzen:

Yahoo-Player kann MP3 und verschiedene andere Formate abspielen. Sie benötigen nur eine Zeile Code zu Ihrer Seite oder Blog, können Sie einfach Ihre HTML-Seite in eine professionelle Wiedergabeliste:

Beispiele

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

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

Versuchen »

Wenn Sie es verwenden möchten, müssen Sie dieses JavaScript in den unteren Rand der Seite zu setzen:

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

Dann einfach auf einen Link in HTML auf Ihren MP3-Dateien setzen, JavaScript erstellt automatisch die Play-Taste für jeden Song:

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

Yahoo-Media-Player für die Benutzer ist eine kleine Play-Taste anstelle der Voll Spieler. Wenn Sie jedoch auf diese Schaltfläche klicken, wird ein kompletter Spieler auftauchen.

Bitte beachten Sie, dass dieser Spieler immer am unteren Rand des Fensterrahmens verankert ist. Klicken Sie einfach auf sie, können Sie es heraus gleiten kann.


Mit Hyperlinks

Wenn die Seite einen Hyperlink zeigt auf Mediendateien enthält, werden die meisten Browser "Hilfsprogramm" verwenden, um die Datei zu spielen.

Das folgende Codefragment zeigt Links zu MP3-Dateien. Wenn der Benutzer auf den Link klickt, startet der Browser "Hilfsprogramm", um die Datei zu spielen:

Beispiele

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

Versuchen »


Beschreibung Sound Inline

Wenn Sie auf einer Webseite Ton gehören, oder als Teil einer Web-Seite, wird es Inline-Sound.

Wenn Sie planen, Inline zu verwenden, in Ihre Web-Anwendungen klingt, müssen Sie erkennen, dass viele Menschen Inline ärgerlich klingen finden. Beachten Sie auch, dass die Nutzer Ihrem Browser Inline-Sound-Option geschlossen haben.

Unsere beste Rat ist, nur dann, wenn der Nutzer will Sound Inline Orte sie enthalten zu hören. Ein positives Beispiel ist, dass, wenn der Benutzer braucht, um die Aufnahme und klicken Sie auf einen Link zu hören die Seite öffnen und die Aufnahme abzuspielen.


HTML Multimedia-Tag

Neu: HTML5 neues Label

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