Calificación:
  • 1 voto(s) - 1 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Aporte Reproductor de audio html
#1
Música 
Por acá les dejo este codigo html de un reproductor html 5 para sus radioweb

Código:
<audio controls autoplay src="TU SERVER:PORT AQUI;">
</audio>
#2
¡¡Muchas gracias!! Pero tengo dos preguntitas:

a) ¿Sirve para Giss.tv?

b) ¿Sirve para wordpress?

Gracias, saludos!
#3
(02-04-2017, 09:22 PM)jcifuentes escribió: ¡¡Muchas gracias!! Pero tengo dos preguntitas:

a) ¿Sirve para Giss.tv?

b) ¿Sirve para wordpress?

Gracias, saludos!

Es un reproductor normal solo que html 5 debe servirte para cualquier función.

@djsmokingcr intenta hacer temas con mayor información que no sean tan pobres y que puedan ser de interés para los demás.
WWW
#4
Excelente aporte! Voy a emplearlo en Wordpress ya veremos que tal va!
Nadie llega a ser millonario sin ser inteligente. 
www.elguayoyo.net ¡Dando de que hablar!
WWW
#5
Ta bueno yo estaba usando uno con javascritp ya es hora de cambiarlo y usar los beneficios de html5
#6
Esta es una de las nuevas maravillas de html5 asi como sureproductor devideo, de esta forma ya no necesitamos algunas cosas adicionalessi lo que queremos es unreproductor simple de video y audio, yo seguiria usando javascript si mi reproductor requiere funciones especiales..

Aqui completo el post del compañero que se me hace un poco pobre.

Digo si s evan a tomar la delicadeza de hacer un post para cumplir con la cuota que nos alimente a todos no? no a medias.

HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos
Código:
<audio>
y
Código:
<video>
, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.
Insertando contenido multimedia
Insertar contenido multimedia en tus documentos HTML es muy sencillo:
Código:
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
 Tu navegador no implementa el elemento <code>video</code>.
</video>
Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.
Este es un ejemplo para insertar audio en tu documento HTML
Código:
<audio src="/test/audio.ogg">
<p>Tu navegador no implementa el elemento audio.</p>
</audio>

El atributo
Código:
src
puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.
Código:
<audio src="audio.ogg" controls autoplay loop>
<p>Tu navegador no implementa el elemento audio</p>
</audio>

Este código de ejemplo usa los atributos del elemento
Código:
<audio>
:
  • controls
  • : muestra los controles estándar de HTML5 para audio en una página web.
    autoplay
  • : hace que el audio se reproduzca automáticamente.
    loop
  • : hace que el audio se repita automáticamente.
Código:
<audio src="audio.mp3" preload="auto" controls></audio>

El atributo
Código:
preload
es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:
  • "none"
  • no almacena temporalmente el archivo
    "auto"
  • almacena temporalmente el archivo multimedia
    "metadata"
  • almacena temporalmente sólo los metadatos del archivo
Se pueden especificar múltiples fuentes de archivos usando el elemento
Código:
<source>
con el fin de proporcionar vídeo o audio codificados en formatos diferentes para diferentes navegadores. Por ejemplo:
Código:
<video controls>
 <source src="foo.ogg" type="video/ogg">
 <source src="foo.mp4" type="video/mp4">
 Tu navegador no implementa el elemento <code>video</code>.
</video>
Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de los formatos multimedia admitidos por los elementos audio y video en los diferentes navegadores.
También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:
Código:
<video controls>
 <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
 Tu navegador no implementa el elemento <code>video</code>.
</video>
Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado.
Si el atributo
Código:
type
no está especificado, el tipo de contenido multimedia se obtiene del servidor y se comprueba para ver si el navegador lo puede manejar; si no puede ser mostrado, se comprueba el siguiente
Código:
source
, si ninguno de los elementos
Código:
source
especificados pueden ser usados, un evento de
Código:
error
es enviado al elemento
Código:
video
. Si el atributo
Código:
type
está especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente
Código:
source
se comprueba una vez.
Mira los eventos del contenido multimedia para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira los formatos multimedia sportados por los elementos audio y video.
Controlando la reproducción multimedia
Una vez que has incrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, puedes controlarlos mediante programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:
Código:
var v = document.getElementsByTagName("video")[0];
v.play();
La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método
Código:
play()
del elemento, como está definido en la interfaz
Código:
nsIDOMHTMLMediaElement
que es usada para implementar los elementos multimedia.
Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es muy sencillo.
Código:
<audio id="demo" src="audio.mp3"></audio>
<div>
 <button onclick="document.getElementById('demo').play()">Reproducir el Audio</button>
 <button onclick="document.getElementById('demo').pause()">Pausar el Audio</button>
 <button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button>
 <button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button>
</div>
Deteniendo la descarga de contenido multimedia
Mientras que detener la reproducción multimedia es tan fácil como llamar al método pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado a través de la recolección de basura.
Aquí un truco para detener la descarga de una sola vez:
Código:
var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src = "";
Estableciendo una cadena vacía al atributo
Código:
src
del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.
Buscando a través de los medios
Los elementos de los medios proporcionan apoyo para mover la posición de reproducción actual a puntos específicos en el contenido de los medios. Esto se hace estableciendo el valor de la propiedad
Código:
horaActual
en el elemento; ver 
Código:
HTMLMediaElement
para más detalles sobre las propiedades del elemento. Basta con establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.
Usted puede utilizar el elemento 
Código:
seekable
 propiedad para determinar los rangos de los medios de comunicación que están disponibles para la búsqueda de la actualidad. Esto devuelve un objeto
Código:
TimeRanges
que enumera los rangos de veces que se puede tratar de:
Código:
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // Returns the starting time (in seconds)
mediaElement.seekable.end();    // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end();      // Returns the number of seconds the browser has played
Especificación del rango de reproducción
Al especificar el URI de los medios de comunicación para un elemento
Código:
<audio>
 o 
Código:
<video>
, puede incluir opcionalmente información adicional para especificar la parte de los medios a reproducir. Para ello, añada una almohadilla ("#"), seguida de la descripción del fragmento de medios.
Un intervalo de tiempo se especifica mediante la sintaxis:
Código:
#t=[starttime][,endtime]
El tiempo se puede especificar como un número de segundos (como un valor de punto flotante) o como una hora / minuto / segundo tiempo separado con dos puntos (por ejemplo, 2:05:01 durante 2 horas, 5 minutos y 1 segundo).
Algunos ejemplos:
http://foo.com/video.ogg # t = 10,20Especifica que el vídeo debe desempeñar el rango de 10 segundos a través de 20 segundos.http://foo.com/video.ogg # t =, 10.5Especifica que el vídeo se reproducirá desde el principio a través de 10,5 segundos.http://foo.com/video.ogg # t =, 02:00:00Especifica que el vídeo se reproducirá desde el principio a través de dos horas.http://foo.com/video.ogg # t = 60Especifica que el vídeo se debe reproducir desde los 60 segundos hasta el final.
Gecko 9.0 note
(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)
La porción rango de reproducción del elemento de la especificación URI media esta en Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6). En este momento, esta es la única parte de la especificación de los medios de comunicación Fragmentos URIimplementado por el Gecko, y sólo se puede utilizar cuando se especifica la fuente para los elementos de los medios de comunicación, y no en la barra de direcciones.
 
Opciones de reserva
HTML incluido entre, por ejemplo, las etiquetas de apertura y cierre de los elementos de los medios de comunicación son procesados por los navegadores que no admitan medios de HTML5. Usted puede tomar ventaja de este hecho para proporcionar medios alternativos de reserva para esos navegadores.
Esta sección proporciona dos opciones de reserva para video. En cada caso, si el navegador soporta vídeo HTML5, que se utiliza, de lo contrario, se utiliza la opción de reserva.
Utilización de Flash
Puede usar Flash para reproducir una película formato Flash si el 
Código:
<video>
 no se admite elemento:
Código:
<video src="video.ogv" controls>
   <object data="flvplayer.swf" type="application/x-shockwave-flash">
     <param value="flvplayer.swf" name="movie"/>
   </object>
</video>
Tenga en cuenta que no se debe incluir 
Código:
classid
 en el 
Código:
objeto
 tag con el fin de ser compatible con los navegadores que no sean Internet Explorer.
 
 
 
Reproducción de vídeos Ogg utilizando un applet de Java
Hay un applet de Java llamada Cortado que se puede utilizar como reserva para reproducir vídeos Ogg en los navegadores que no tienen soporte para Java, pero no es compatible con vídeo HTML5:
Código:
<video src="my_ogg_video.ogg" controls width="320" height="240">
 <object type="application/x-java-applet" width="320" height="240">
    <param name="archive" value="cortado.jar">
    <param name="code" value="com.fluendo.player.Cortado.class">
    <param name="url" value="my_ogg_video.ogg">
    <p>You need to install Java to play this file.</p>
 </object>
</video>
Si no se crea un elemento secundario alternativa del elemento de objeto cortado, como el 
Código:
<p>
 elemento superior, Firefox 3.5 instalaciones que manejan el video de forma nativa, pero no tienen Java instalado incorrectamente informarán al usuario de que es necesario instalar un plugin para ver el contenido en la página.
 
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
Gestión de errores
 
A partir de Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), el tratamiento de errores se ha revisado para que coincida con la última versión de la especificación HTML5. En lugar de que el
Código:
error sea
enviado al elemento en sí, ahora se entrega a los elementos "hijos"
Código:
<source>
correspondientes a las fuentes que resultan en el error.
Esto permite detectar las fuentes no pudieron cargar, que puede ser útil. Considere este HTML:
Código:
<video>
<source id="mp4_src"
 src="video.mp4"
 type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</source>
<source id="3gp_src"
 src="video.3gp"
 type='video/3gpp; codecs="mp4v.20.8, samr"'>
</source>
<source id="ogg_src"
 src="video.ogv"
 type='video/ogg; codecs="theora, vorbis"'>
</source>
</video>
Dado que Firefox no es compatible con MP4 y 3GP, debido a su naturaleza de patente gravado, los 
Código:
<source>
 elementos con el ID "mp4_src" y "3gp_src" recibirán 
Código:
error
 eventos antes de cargar el recurso Ogg. Las fuentes son juzgados en el orden en el que aparecen, y una vez que uno carga con éxito, las fuentes restantes no se trataron en absoluto.
Detectar si las fuentes no han cargado
Código:
Para detectar qué todos los elementos

Código:
<source>
no han podido cargarse, se debe comprobar el valor de la propiedad
Código:
NetworkState
qué poseen todos los elementos de tipo multimedia. Si el valor es 
Código:
HTMLMediaElement.NETWORK_NO_SOURCE
, se sabrá que las fuentes no se cargaron correctamente.
Si en ese momento se agrega otra fuente mediante la inserción de un nuevo elemento
Código:
<source>
como hijo del elemento multimedia, Gecko intenta cargar el recurso especificado.
Mostrando contenido fallback cuando la fuente no puede ser cargada
Otra forma de mostrar el contenido fallback de un vídeo cuando ninguna de sus fuentes pudieron ser cargadas, es añadir un manejador de excepciones o errores en el último elemento
Código:
<source>
. Así usted podrá reemplazar el vídeo con el contenido fallback:
Código:
<video controls>
 <source src="dynamicsearch.mp4" type="video/mp4"></source>
 <a href="dynamicsearch.mp4">
   <img src="dynamicsearch.jpg" alt="App de b&uaacute;squeda din&aacute;mica en Firefox OS">
 </a>
 <p>Clic en la im&aacute;gen para reproducir un v&iacute;deo demo de la app de b&uaacute;squeda din&aacute;mica</p>
</video>
Código:
var v = document.querySelector('video'),
   sources = v.querySelectorAll('source'),
   lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
 var d = document.createElement('div');
 d.innerHTML = v.innerHTML;
 v.parentNode.replaceChild(d, v);
}, false);

Fuente -> https://developer.mozilla.org/es/docs/Web/HTML/Usando_audio_y_video_con_HTML5
#7
(03-04-2017, 04:54 PM)gassip escribió: Esta es una de las nuevas maravillas de html5 asi como sureproductor devideo, de esta forma ya no necesitamos algunas cosas adicionalessi lo que queremos es unreproductor simple de video y audio, yo seguiria usando javascript si mi reproductor requiere funciones especiales..

Aqui completo el post del compañero que se me hace un poco pobre.

Digo si s evan a tomar la delicadeza de hacer un post para cumplir con la cuota que nos alimente a todos no? no a medias.

HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos
[...]

Muchísimas gracias por explicar la información. Es importante difundir esta información pues hay muchas personas que no conocen la capacidad del HTML5 y otros como yo que no sabemos los detalles específicos
I'm a happy person
WWW
#8
(11-04-2017, 03:06 AM)Hinamaru escribió:
(03-04-2017, 04:54 PM)gassip escribió: Esta es una de las nuevas maravillas de html5 asi como sureproductor devideo, de esta forma ya no necesitamos algunas cosas adicionalessi lo que queremos es unreproductor simple de video y audio, yo seguiria usando javascript si mi reproductor requiere funciones especiales..

Aqui completo el post del compañero que se me hace un poco pobre.

Digo si s evan a tomar la delicadeza de hacer un post para cumplir con la cuota que nos alimente a todos no? no a medias.

HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos
[...]

Muchísimas gracias por explicar la información. Es importante difundir esta información pues hay muchas personas que no conocen la capacidad del HTML5 y otros como yo que no sabemos los detalles específicos

Asi es, muchas veces no checamos las diferencias o novedades entre una versión y otra.
#9
Voy a probarlo, soy bastante novato en html estoy comenzando recién.
#10
Justo hace una semana se me presentó un proyecto nuevo en donde me piden algo así. Gracias por la información @gassip


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Sonrisa Login->html+js+ajax+php wpadilla 2 303 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 27 1,073 21-10-2017, 01:47 AM
Último mensaje: ReyNexo23
  Plantillas HTML Responsive Free Profesionales gassip 16 827 13-06-2017, 03:45 AM
Último mensaje: gassip
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 341 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Expandir etiquetas HTML en documento .php con EMMET gassip 2 453 18-11-2016, 07:28 PM
Último mensaje: DaveNPlay
  [Aporte] PcTag: Información HTML KesiaMuller 0 359 28-10-2016, 05:42 AM
Último mensaje: KesiaMuller
  [Tutorial] Curso de PSD a HTML a WP habacuc78 14 943 31-08-2016, 09:33 PM
Último mensaje: ServiRemate
  Elementos que desaparecieron de HTML 5 Kevin9908 2 408 02-08-2015, 04:55 PM
Último mensaje: avdarie
  web con html o cms efbsfcd 7 592 01-07-2015, 03:12 PM
Último mensaje: d0rag0n
  Cuanto deberia cobrar por web HTML fercol 15 1,058 30-06-2015, 06:20 AM
Último mensaje: jhonatan123



Usuarios navegando en este tema: 1 invitado(s)