Háttérzene - zene

forrás: https://www.w3schools.com

 

Hangok is játszhatóak a HTML-ben különböző módszerekkel.

Problémák, problémák és megoldások

Hangok lejátszása a HTML-ben nem könnyű!

Tudnia kell, hogy egy csomó trükk létezik rá.

Ebben a fejezetben W3Schools (https://www.w3schools.com)  összegzi a problémákat és a megoldásokat.

A Plug-inek

A plug-in egy kis számítógépes program, amely kiterjeszti a szabványos funkciókat a böngészőbe.

Plug-inek hozzá adhatóak HTML oldalakhoz  <objektum> tag vagy a <embed> tag segítségével.

Ezek a címkék meghatározzák hogy milyen módon fog működni illetve milyen módon fogja látni a lejátszót.

Az <embed>

A következő kódrészlet kell beillesztenük a web-oldalunkra:

Példa

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

Kipróbálás »

Problémák:

  • A különböző böngészők támogatják a különböző audio formátumokat
    Ha a böngésző nem támogatja a fájlformátumot, a hang nem játszható le. Ilyenkor plugin szükséges (Elég ha telepítve van a WMP,VLC.. player)
    Ha a plug-in nincs telepítve a felhasználó számítógépére, a hang nem kerül lejátszásra.
    Ha a fájlt konvertálja más formátumban, attól még nem biztos hogy a hang lejátszásra kerül

Az <object> rész

 

A <objektum tag> tag is definiálhat egy részt a külső (nem HTML) tartalomban.
A következő kódrészlet kell beillesztenük a web-oldalunkra:

 

 

Példa

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

Kipróbálás »

 

Problémák:

  • A különböző böngészők támogatják a különböző audio formátumokat
    Ha a böngésző nem támogatja a fájlformátumot, a hang nem játszható le. Ilyenkor plugin szükséges (Elég ha telepítve van a WMP,VLC.. player)
    Ha a plug-in nincs telepítve a felhasználó számítógépére, a hang nem kerül lejátszásra.
    Ha a fájlt konvertálja más formátumban, attól még nem biztos hogy a hang lejátszásra kerül

Using the HTML5 <audio> Element

 

A HTML5 ben  <audio> tag határozza meg a hangot, mint a zene vagy más audio részként.
 
A <audio> elem működik az összes modern böngészőben.
 
A következő példában a <audio> tag, és meghatározza egyetlen MP3 fájl (Internet Explorer, Chrome és Safari), és egy OGG file (a Firefox és az Opera). Ha valami nem sikerül, ha megjelenik egy szöveg lép:

 

Példa

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

 Próbáld ki »

Problémák:

  • Át kell alakítani az audio fájlokat különböző fájl formátumokban
    A <audio> elem nem működik a régebbi böngészőkön

A legjobb HTML megoldás

Az alábbi példa a HTML5 <audio> elemet használja és lepróbálja játszani az audio vagy akár MP3 vagy OGG fájlformátumokat. Ha ez nem sikerül, a kód "vissza esik", és akkor szükséges hogy próbálja ki a <embed> tagot:

Példa

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

Próbáld ki »

Problems:

  • Át kell alakítani az audio fájlokat különböző fájl formátumokban

Yahoo Media Player - An Easy Way to Add Audio to Your Site

The FREE Yahoo Media Player is definitely a favorite: You simply let Yahoo do the job of playing your songs.

It plays MP3 and a lot of other formats. You can add it to your page (or blog) with a single line of code, and easily turn your HTML page into a professional playlist:

 

 

Az ingyenes Yahoo Media Player egyszerűen lejátsza nekünk a kedvenc zenénk.
 
Lejátszik akár, MP3, és sok más formátumot. Add egyszerűen a kódot a blogodhoz és készíts profi zenelistát amit ezt a lejátszó lejátszik:

 

Példa

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

<script src="https://mediaplayer.yahoo.com/js"></script>

Próbáld ki »

Ahoz hogy használni tudja a lejátszót helyezze el a következő JavaScriptet oldalán:

<script src="https://mediaplayer.yahoo.com/js"></script>

 

Ön csak létrehozza a zenéket az alábbi módon és a HTML be beágyazott JavaScript ezt felismeri és automatikusan lejátszási listát készít:

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

The Yahoo Media Player presents your readers with a small play button instead of a full player. However, when you click the button, a full player pops up. Note that the player is always docked and ready at the bottom of the window. Just click on it to slide it out.

A Hyperlink használata

If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.

The following code fragment displays a link to an MP3 file. If a user clicks on the link, the browser will launch a helper application to play the file:

 

 
 
A következő kódrészlet megjeleníti a linket azaz egy MP3 fájlt fog lejátszani. Ha a felhasználó rákattint a linkre, a böngésző elindítja az adott hangot és a plugin automatikusan lejátsza önnek a hangot. 

 

 

 

Példa

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

Példa »