¿Cómo incrustar audio dentro de un sitio web?

Question

He estado buscando la respuesta por años y parece que no puedo encontrar lo que necesito.

Nunca he codificado nada relacionado con material de audio.

Lo que quiero hacer es incrustar archivos de música dentro de un sitio web (Tener algo como un pequeño reproductor de mp3 en el sitio). Quiero que la audiencia pueda reproducir, detener, etc. las canciones mediante el uso de controladores personalizados.

¿Cómo puedo codificar esos botones personalizados para que funcionen bien?

Solo tengo que codificar HTML y CSS (php, java, etc.). ¿Qué me aconsejarías que hiciera para crear esta función en la plantilla?

Gracias =)

P.S.

tengo que usar XHTML 1.0 Transitional

Answer 1

Puede usar muchas cosas.

• Si eres un adicto a las normas, puede utilizar la etiqueta HTML 5 <audio>:

Here is the official W3C specification for the audio tag.

Uso:

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

• O, si se quiere apoyar a los navegadores más antiguos, puede utilizar many of the free audio flash players available. Tales como:

  • Dewplayer
  • MP3 Player (nombre aburrido ... ¿verdad? :))
  • Website Music Player (aún más aburrido ... ¿no?)
  • Zanorg Player

Nota: No estoy seguro de que son los mejores queridos, ya que nunca he utilizado uno (aún).

---

ACTUALIZACIÓN: Como se mencionó en el comentario de otra respuesta, que está utilizando XHTML 1.0 Transitional. Es posible que pueda obtener <audio> para trabajar con algunos hack.

---

ACTUALIZACIÓN 2: simplemente recordé otra manera de hacer de audio juego. ¡Este va a funcionar en XHTML !!! Esto es totalmente compatible con los estándares.

se utiliza este 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.

---

Actualización 3: Para personalizar los controles, se puede usar algo como this.

Answer 2

Si está utilizando HTML 5, no es el elemento <audio>.

En MDN:

El elemento audio se utiliza para incrustar el contenido de sonido en un documento HTML o XHTML. El elemento de audio se agregó como parte de HTML5.

---

Actualización:

Con el fin de reproducir el audio en el navegador HTML en versiones antes de las 5 (incluyendo XHTML), es necesario utilizar uno de los muchos reproductores de audio flash.

Answer 3

Definitivamente, el elemento HTML5 es el camino a seguir. Hay al menos básico de apoyo a la misma en las versiones más recientes de casi todos los navegadores:

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

y permite especificar qué hacer cuando el elemento no es compatible con el navegador.Por ejemplo, podría añadir un enlace a un archivo haciendo:

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

Usted puede encontrar esta ejemplos y más información sobre el elemento de audio en el siguiente enlace:

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

Por último, la buena Las noticias son que el Dev Derby de abril de Mozilla trata sobre este elemento, por lo que es probable que proporcione muchos ejemplos de cómo sacar el máximo provecho de este elemento:

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

Answer 4

Aquí es una solución para hacer un reproductor de audio accesible con XHTML y no intrusivas gracias javascript a W3C Web Audio API:

Qué hacer:

1. Si el navegador es capaz de leer, a continuación, mostramos controles
2. Si el navegador no es capaz de leer, sólo prestamos un enlace al archivo

primer lugar al l, comprobamos si el navegador implementa Web Audio API:

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

Luego instanciate un Audio objeto:

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

después podemos comprobar si el navegador es capaz de decodificar este tipo de archivo:

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

O incluso si puede jugar el códec:

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

Entonces podemos usar player.play(), player.pause();

He hecho un pequeño plugin de JQuery al que llamé nanodio para probar esto.

Puede comprobar cómo funciona en my demo page (lo siento, pero el texto está en francés: p)

basta con hacer clic en un enlace para jugar y haga clic de nuevo para hacer una pausa. Si el navegador puede leerlo de forma nativa, lo hará. Si no puede, debe descargar el archivo.

Esto es sólo un pequeño ejemplo, pero puedes mejorarlo para usar cualquier elemento de tu página como un botón de control o generar sobre la marcha con javascript ... Lo que quieras.

Answer 5

Encontré que IE o Chrome se ahogaban en la mayoría de estos, o requerían bibliotecas externas. Solo quería reproducir un MP3, y encontré la página http://www.w3schools.com/html/html_sounds.asp muy útil.

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

a mí me funcionó en los navegadores que he probado, pero no tuve algunos de los ancianos de todo en este 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>