Come incorporare l'audio in un sito Web?

Question

Ho cercato la risposta per anni e non riesco a trovare quello che mi serve.

Non ho mai codificato nulla collegato a contenuti audio.

Quello che voglio fare è incorporare file musicali all'interno di un sito web (avere qualcosa come un piccolo lettore mp3 sul sito). Voglio che il pubblico sia in grado di riprodurre, interrompere ecc. Le canzoni usando controller personalizzati.

Come si codificano i pulsanti personalizzati in modo che funzionino correttamente?

Devo solo codice HTML e CSS (php, java ecc sono lasciati per gli altri). Cosa mi consiglieresti di fare per creare questa funzionalità sul modello?

Grazie =)

P.S.

devo usare XHTML 1.0 Transitional

Answer 1

È possibile utilizzare molte cose.

• Se sei un drogato di standard, è possibile utilizzare il tag HTML5 <audio>:

Here is the official W3C specification for the audio tag.

Usage:

<audio controls> 
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" 
     type='audio/mp4'> 
<!-- The next two lines are only executed if the browser doesn't support MP4 files --> 
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" 
     type='audio/ogg; codecs=vorbis'> 
<!-- The next line will only be executed if the browser doesn't support the <audio> tag--> 
<p>Your user agent does not support the HTML5 Audio element.</p> 
</audio> 

jsFiddle here.

• Oppure, se si desidera supportare i browser più vecchi, è possibile utilizzare many of the free audio flash players available. Come ad esempio:

  • Dewplayer
  • MP3 Player (nome noioso ... giusto? :))
  • Website Music Player (ancora più noioso ... giusto?)
  • Zanorg Player

Nota: Non sono sicuro di quali sono i migliori quelli, come non ho mai usato uno().

---

UPDATE: Come menzionato nel commento di un'altra risposta, si utilizza XHTML 1.0 Transitional. Potresti riuscire a far funzionare <audio> con qualche trucco.

---

UPDATE 2: ho appena ricordato un altro modo per fare l'audio del gioco. Questo sarà funziona in XHTML !!! Questo è pienamente conforme agli standard.

si utilizza questo JavaScript:

var aud = document.createElement("iframe"); 
aud.setAttribute('src', "http://yoursite.com/youraudio.mp4"); // replace with actual file path 
aud.setAttribute('width', '1px'); 
aud.setAttribute('height', '1px'); 
aud.setAttribute('scrolling', 'no'); 
aud.style.border = "0px"; 
document.body.appendChild(aud); 

This is my answer to another question.

---

UPDATE 3: Per personalizzare i controlli, è possibile usare qualcosa come this.

Answer 2

Se si utilizza HTML 5, c'è l'elemento <audio>.

Su MDN:

L'elemento audio viene utilizzato per incorporare i contenuti audio in un documento HTML o XHTML. L'elemento audio è stato aggiunto come parte di HTML5.

---

Aggiornamento:

Al fine di riprodurre l'audio nel browser nelle versioni HTML prima di 5 (tra cui XHTML), è necessario utilizzare uno dei tanti lettori audio flash.

Answer 3

Sicuramente l'elemento HTML5 è la strada da percorrere. C'è almeno di base il supporto per esso nelle più recenti versioni di quasi tutti i browser:

http://caniuse.com/#feat=audio

e permette di specificare cosa fare quando l'elemento non è supportato dal browser.Ad esempio si potrebbe aggiungere un link ad un file facendo:

<audio controls src="intro.mp3"> 
    <a href="intro.mp3">Introduction to HTML5 (10:12) - MP3 - 3.2MB</a> 
</audio> 

È possibile trovare questo esempi e maggiori informazioni circa l'elemento audio nel seguente link:

http://hacks.mozilla.org/2012/04/enhanceyourhtml5appwithaudio/

Infine, il buon Le notizie sono che il Der Derby di April di Mozilla riguarda questo elemento, quindi probabilmente fornirà un sacco di ottimi esempi su come ottenere il massimo da questo elemento:

http://hacks.mozilla.org/2012/04/april-dev-derby-show-us-what-you-can-do-with-html5-audio/

Answer 4

Ecco una soluzione per fare un lettore audio accessibile con validato XHTML e non intrusivo, grazie javascript per W3C Web Audio API:

Cosa fare:

1. Se il browser è in grado di leggere, poi visualizziamo controlli
2. Se il browser non è in grado di leggere, abbiamo appena rendiamo un collegamento al file

Prima di al l, controlliamo se il browser implementa API Web Audio:

if (typeof Audio === 'undefined') { 
    // abort 
} 

Poi abbiamo instanciate un Audio oggetto:

var player = new Audio('mysong.ogg'); 

Poi possiamo controllare se il browser è in grado di decodificare questo tipo di file:

if(!player.canPlayType('audio/ogg')) { 
    // abort 
} 

o anche se è in grado di riprodurre il codec:

if(!player.canPlayType('audio/ogg; codecs="vorbis"')) { 
    // abort 
} 

Quindi possiamo usare player.play(), player.pause();

Ho eseguito un piccolo plugin JQuery che ho chiamato nanodio per verificarlo.

È possibile controllare come funziona il my demo page (mi dispiace, ma il testo è in francese: p)

Basta cliccare su un link per giocare, e clicca di nuovo per mettere in pausa. Se il browser può leggerlo in modo nativo, lo farà. Se non può, dovrebbe scaricare il file.

Questo è solo un piccolo esempio, ma puoi migliorarlo per utilizzare qualsiasi elemento della tua pagina come pulsante di controllo o generarne uno al volo con javascript ... Qualsiasi cosa tu voglia.

Answer 5

Ho trovato che sia IE o Chrome soffocato sulla maggior parte di questi, o hanno richiesto librerie esterne. Volevo solo riprodurre un MP3 e ho trovato la pagina http://www.w3schools.com/html/html_sounds.asp molto utile.

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

Ha lavorato per me nei browser che ho provato, ma non ho avuto alcuni di quelli vecchi in giro in questo momento.

Answer 6

<html> 

<head> 
    <H1> 
     Automatically play music files on your website when a page loads 
    </H1> 
</head> 

<body> 
    <embed src="YourMusic.mp3" autostart="true" loop="true" width="2" height="0"> 
    </embed> 
</body> 

</html>