Latest web development tutorials

HTML audio (Audio)

Dźwięk w formacie HTML mogą grać na różne sposoby.


Problemy i rozwiązania

Odtwarzanie dźwięku w formacie HTML nie jest łatwe!

wiele znanych wskazówek należy się upewnić, że pliki audio w wszystkich przeglądarek (Internet Explorer, Chrome, Firefox, Safari, Opera), a wszystkie sprzętowe (PC, Mac, iPad, iPhone) mogą być odtwarzane.

W tym rozdziale W3CSchool podsumować problemy i rozwiązania.


Korzystanie z plug-in

Przeglądarka plug-in jest rozszerzeniem standardowej przeglądarce znajduje się niewielki program komputerowy.

Plug-iny mogą korzystać z <object> lub <embed> tag dodany do strony.

Etykiety te określenia zasobu (zazwyczaj nieodnawialnych HTML) pojemnik, w zależności od typu, będą one wyświetlane przez przeglądarkę, która jest również wyświetlana przez zewnętrznych wtyczek.


Korzystanie z elementu <embed>

<Embed> tag definiuje zewnętrzną zawartość pojemnika (bez HTML). (Jest to znaczniki HTML5 w HTML4 jest nielegalne, ale wszystkie przeglądarki są ważne).

Poniższy fragment kodu wyświetla plik MP3 osadzony na stronie internetowej:

Przykłady

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

Spróbuj »

problem:

  • <Embed> w HTML 4 jest nieprawidłowy. Strona nie może zostać zweryfikowana przez HTML 4.
  • Różne przeglądarki obsługują różne formaty audio dla.
  • Jeśli Twoja przeglądarka nie obsługuje format pliku, bez wtyczki, to nie można odtwarzać dźwięk.
  • Jeśli komputer użytkownika nie jest zainstalowany plug-in, nie można odtwarzać dźwięk.
  • Jeśli plik jest konwertowane do innych formatów, wciąż nie mogą grać we wszystkich przeglądarkach.

Zastosowanie <object> Element

<Tag Object> Znacznik może być również zdefiniowana poza zawartości pojemnika (bez HTML).

Poniższy fragment kodu wyświetla plik MP3 osadzony na stronie internetowej:

Przykłady

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

Spróbuj »

problem:

  • Różne przeglądarki obsługują różne formaty audio dla.
  • Jeśli Twoja przeglądarka nie obsługuje format pliku, bez wtyczki, to nie można odtwarzać dźwięk.
  • Jeśli komputer użytkownika nie jest zainstalowany plug-in, nie można odtwarzać dźwięk.
  • Jeśli plik jest konwertowane do innych formatów, wciąż nie mogą grać we wszystkich przeglądarkach.

Użyj HTML5 <audio> elementu

HTML5 <audio> element jest elementem HTML5 w HTML 4 jest nielegalne, ale we wszystkich przeglądarkach są ważne.

Znacznik <audio> Element działa we wszystkich nowoczesnych przeglądarkach.

Poniżej użyjemy <audio> tag opisanie plików MP3 (Internet Explorer, Chrome i Safari jest skuteczna), dodaje się również typy plików OGG (Firefox i Opera przeglądarek skuteczne). Jeśli to się nie powiedzie, to wyświetla błąd tekst:

Przykłady

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

Spróbuj »

problem:

  • <Audio> w HTML 4 jest nieprawidłowy. Twoja strona nie może zostać zweryfikowana przez HTML 4.
  • Trzeba konwertować pliki audio w różnych formatach.
  • <Audio> element nie działa w starszych przeglądarkach.

Najlepszy HTML Rozwiązanie

Poniższy przykład używa dwóch różnych formatów audio. HTML5 <audio> Element próbuje odtwarzać ogg na mp3 lub audio. Jeśli to się nie powiedzie, to kod będzie próbował wycofać <embed> elementu.

Przykłady

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

Spróbuj »

problem:

  • Musisz być konwertowane do innego formatu audio.
  • <Embed> elementu nie może zostać wycofana, aby wyświetlić komunikat o błędzie.

Yahoo Media Player - prosty sposób na dodanie dźwięku na swojej stronie

Gracz za pomocą Yahoo jest bezpłatne. Aby z niej skorzystać, trzeba umieścić ten JavaScript na dole strony:

Yahoo player może odtwarzać pliki MP3 i inne formaty. Wystarczy tylko dodać jedną linię kodu na swojej stronie lub blogu, można łatwo zrobić swoją stronę HTML do profesjonalnego odtwarzania:

Przykłady

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

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

Spróbuj »

Jeśli chcesz go używać, trzeba umieścić ten JavaScript na dole strony:

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

Następnie wystarczy umieścić link do plików MP3 w formacie HTML, JavaScript automatycznie tworzy przycisk odtwarzania dla każdego utworu:

<a href="song1.mp3"> Zagraj Pieśń 1 </a>
<a href="song2.wav"> Zagraj Pieśń 2 </a>
...
...

Yahoo media player dla użytkowników jest mały przycisk play zamiast pełnej graczem. Jednak po kliknięciu tego przycisku pojawi się kompletny odtwarzacz.

Należy pamiętać, że ten zawodnik jest zawsze zawinął do dolnej części ramy okiennej. Wystarczy kliknąć na nim, można przesunąć go.


Używanie hiperłączy

Jeśli strona zawiera hiperłącze wskazujące na pliki multimedialne, większość przeglądarek użyje "aplikacji pomocnika", aby go odtworzyć.

Poniższy fragment kodu pokazuje linki do plików mp3. Jeśli użytkownik kliknie na link, przeglądarka uruchomi aplikację "pomocnika", aby odtworzyć plik:

Przykłady

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

Spróbuj »


Opis inline dźwięku

Po dołączeniu dźwięku na stronie internetowej, lub jako część strony internetowej, nazywa inline dźwięku.

Jeśli masz zamiar użyć inline brzmi w aplikacjach internetowych, trzeba zdać sobie sprawę, że wiele osób uważa inline wydawać denerwujące. Należy również pamiętać, że użytkownicy mogą mieć opcję dźwięku inline przeglądarka zamknięte.

Nasza najlepsza rada jest tylko wtedy, gdy użytkownik chce usłyszeć dźwięk miejsc inline je zawierają. Pozytywnym przykładem jest to, że gdy użytkownik musi usłyszeć nagranie i kliknij na link otworzy stronę i odtworzyć nagranie.


HTML tag multimedialny

Nowość: HTML5 nowa etykieta

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