Introducción al reproductor de audio
¿Quiere un reproductor de audio html5 ingenioso, vanguardista, listo para retina y con capacidad de respuesta para su sitio? ZoomSounds es el candidato perfecto. Con tres máscaras para adaptarse a cada marca, solo se requiere un formato para funcionar, ZoomSounds
Versión de WordPress
Características del reproductor de audio
- tecnología HTML5 – esta galería utiliza las últimas técnicas html5 para brindar una experiencia nunca antes vista a sus clientes
- totalmente receptivo – se ve muy bien desde el móvil a HD
- copia de seguridad flash – ie7 e ie8 no son compatibles con html5, pero esos usuarios no se olvidan, los sonidos también se reproducirán para ellos a través del reproductor flash
- un formato obligatorio – la parte difícil la realiza el script del reproductor para que el usuario tenga una experiencia de edición fácil – solo se requiere mp3
- táctil optimizado – los dispositivos táctiles no se olvidan
- cinco pieles – para cada necesidad
- tres pieles – tres máscaras completas para adaptarse a cada marca
- tecnología CSS3 – este reproductor utiliza definiciones css3 de última generación
- Instalación fácil – compre, descargue el zip, lea los documentos
- iPhone/iPad optimizado – esta galería ha sido optimizada para dispositivos táctiles de Apple
- Android optimizado – este componente ha sido probado en Android 4.0 y funciona increíble
- desarrollador / potenciado por SASS – El CSS de este componente se ha construido sobre SASS, lo que significa que los usuarios de SASS tendrán facilidad para modificar las máscaras. Para los usuarios que no son de SASS, tampoco hay problema porque se proporcionan archivos CSS (generados por SASS).
- reproduce desde SoundCloud – transmite audio de SoundCloud con una clave API
- 100% css personalizable – ¿Quieres hacer ligeras modificaciones a las pieles? Las máscaras están 100% construidas a partir del css y es muy fácil de editar con conocimiento de css
- Compatible con SEO – construido con optimización de motores de búsqueda en mente desde cero, Testimonial Rotator utiliza marcado html válido no oculto para construir el widget
- compatible con todos los principales navegadores, incluido IE – compatible desde IE7 a IE10, Chrome, Safari y Firefox
Móvil optimizadoSuave en los móviles también debido a Ver video |
Actualizaciones del reproductor de audio
Si ha actualizado archivos html y tiene su propio proyecto, solo necesita actualizar audioplayer/audioplayer.css y audioplayer/audioplayer.js y quizás publisher.php, para que se aplique la actualización.
ACTUALIZACIÓN 4.26 [ 02/20/2018 ]
- [FIX] publisher.php no guarda formas de onda
ACTUALIZACIÓN 4.25 [ 02/16/2018 ]
- [FIX] algunos errores
ACTUALIZACIÓN 4.24 [ 01/21/2018 ]
- [FIX] algunos errores
ACTUALIZACIÓN 2.73 [ 11/07/2017 ]
- [FIX] algunos errores
- [FIX] algunos errores de youtube con el juego resuelto
ACTUALIZACIÓN 2.72 [ 10/16/2017 ]
- [TWEAK] piel rediseñada-mínimo
- [TWEAK] reelaboró algunos cálculos de tiempo actual / tiempo total
- [ADD] función de juego sin pausas – reproducir canciones en una lista de reproducción sin interrupción, la pista que se supone que viene a continuación se precargará 10 segundos antes de su turno, por lo que puede comenzar de inmediato
ACTUALIZACIÓN 2.71 [ 09/27/2016 ]
- [TWEAK] rediseñado la mayoría de los botones
- [TWEAK] vista previa actualizada
ACTUALIZACIÓN 2.70 [ 07/21/2016 ]
- [ADD] nuevo método de visualización de ondas ( skinwave_wave_mode: “canvas”)
ACTUALIZACIÓN 2.67 [ 07/09/2016 ]
- [TWEAK] ahora reproduciendo seleccionando otras pistas de la galería mantiene el volumen actual de la pista en reproducción
ACTUALIZACIÓN 2.65 [ 05/19/2016 ]
- [TWEAK] vista previa actualizada
- [ADD] index-sticktobottom-3.html – ejemplo de cuadrícula 3
ACTUALIZACIÓN 2.64 [ 05/19/2016 ]
- [FIX] Google Analytics for Play Event ahora funciona con la versión más reciente de Analytics.js
- [ADD] index-analytics.html: ejemplo de cómo usar análisis para eventos de reproducción
ACTUALIZACIÓN 2.63 [ 05/11/2016 ]
- [FIX] insectos
ACTUALIZACIÓN 2.62 [ 04/07/2016 ]
- [ADD] ejemplo sobre cómo reproducir una pista privada de soundcloud a través de api
- [ADD] cargar evento de metadatos
- [FIX] no jugar en dispositivos móviles transmitiendo desde datos de red
ACTUALIZACIÓN 2.01 [ 09/07/2015 ]
- [FIX] varios arreglos
ACTUALIZACIÓN 2.00 [ 01/20/2015 ]
- [ADD] piel añadida-aria
- [ADD] Se agregó la opción enable_easing en el movimiento del menú.
- [ADD] Evento de análisis de Google agregado para jugar.
- [ADD] Opción para cambiar la canción en un reproductor (+ llamada API)
- [ADD] galería de piel – skin-default o skin-wave
- [TWEAK] Se cambió el diseño del modo de onda de la piel de absoluto a relativo.
ACTUALIZACIÓN 1.62 [ 07/03/2014 ]
- [FIX] reproducción automáticaSiguiente forzó la reproducción automática activada
ACTUALIZAR 1.50 [ 04/02/2014 ]
- [ADD] piel-pro
- [TWEAK] vista previa actualizada
- [FIX] algunos errores en Safari
ACTUALIZAR 1.40 [ 01/15/2014 ]
- [ADD] ahora pueden aparecer comentarios cuando el cabezal de fregado está encima
- [ADD] piel-solopulgarbotón
- [ADD] nuevo modo stick to bottom
- [ADD] nuevo modo slick para ondas de piel
- [TWEAK] vista previa actualizada
- [FIX] algunos errores
ACTUALIZACIÓN 1.10 [ 06/06/2013 ]
- [add] todo nuevo generador de flash para las formas de onda [ the old html5 had some compatibility issues ]
- [fix] problemas de compatibilidad
Características adicionales del reproductor de audio
Totalmente personalizable.
Puede deshabilitar la barra de limpieza, los controles de volumen, la miniatura de los controles de pantalla completa y más. Puede personalizar todos los colores a través de CSS. El jugador de la izquierda usa la segunda piel del jugador. La primera piel es la piel de onda de sonido en la parte superior.
Retina lista.
Cada piel responde completamente y está lista para la retina. Guau. El reproductor en sí ha sido probado en todos los principales navegadores, Firefox, Chrome, Opera, Safari, IE7-10. Y optimizado para las plataformas móviles iOS y Android.
Jugador mínimo.
A veces, más es menos, y este jugador tiene todos los escenarios cubiertos. Esta de la derecha es la representación de la tercera piel del reproductor, una implementación mínima que incluso tiene controles de barrido (si haces clic en los márgenes).
Un solo formato.
Los reproductores de audio html5 de hoy requieren el mundo en diferentes formatos de audio. Pero no este. Solo se requiere mp3 y ogg es opcional.
Inteligente.
Puede colocar tantos jugadores en una página como desee. Si otro jugador está jugando y haces clic en otro diferente, el otro jugador dejará de jugar, solo prueba aquí.
Múltiples fuentes.
Los audios autohospedados no son su única opción. También puede reproducir transmisiones desde SoundCloud o incluso estaciones de radio Shoutcast*
* (para Shoutcast): primero debe verificar si la transmisión es audio/mpeg. Tomemos, por ejemplo, http://streamplus40.leonex.de:41364/si abre esto en un navegador, verá que Tipo de contenido: audio/mpeg
Generador de forma de onda
con nuevo Lienzo Modo: después de cargar el mp3, la forma de onda se generará automáticamente; esto sucederá solo una vez y luego se guardará en la base de datos, por lo que las reproducciones posteriores del mp3 se leerán instantáneamente desde la forma de onda generada guardada.
__
Con antiguo (en desuso) Imagen Modo:
- genere formas de onda con un panel de administración (waveformgenerator.php), en el que puede cambiar el color, el multiplicador, rastrear la ubicación, etc. / basado en flash
- generar formas de onda para todos los mp3 en una carpeta (wavegeneratorfromdir.php) / basado en flash
- generar forma de onda para song.mp3 a wavesbg.png y wavesprog.png – estático (waveform.html) – puede editar ese html para diferentes colores, nombres/basado en flash
- waveformgenerator_html/ para usar el generador de forma de onda html5 / basado en html5, no admito esto en este momento
Presentación de los dos primeros métodos: https://youtu.be/WrTSB54oTkI
notas
- las pistas y las imágenes no están incluidas en el paquete de descarga.
- para usar el sistema de comentarios necesitarás un servidor php
- youtube no funcionará como audio en iDevices sino como video debido a las limitaciones de la plataforma
- la forma de onda se generará automáticamente, pero necesitará un servidor php para la función de guardado
Preguntas más frecuentes
En el reproductor más pequeño (el reproductor circular en el lado derecho de su página de demostración) me gustaría poder hacer que todo el reproductor sea más grande. En lugar de 100px/100px me gustaría 500px/500px. ¿Dónde cambio esto? ¡He editado el lienzo pero se ha vuelto más pequeño!
Simplemente edite el ancho 100 y la altura 100 en este código y debería estar bien (línea ~ 377)
_conPlayPause.children('.playbtn').append('<canvas width="100" height="100" class="playbtn-canvas"/>');
skin_minimal_canvasplay = _conPlayPause.find('.playbtn-canvas').eq(0).get(0);
_conPlayPause.children('.pausebtn').append('<canvas width="100" height="100" class="pausebtn-canvas"/>');
¿Puede esto/se une esto a las etiquetas
No hay forma de vincular a la etiqueta de audio.
Creará una etiqueta de audio por sí mismo.
pero creo que el formato es bastante fácil
<div id="apsimple" class="audioplayer-tobe" style="width:100%; margin-top:0;" data-videotitle="Audio Video" data-type="normal" data-source="./sounds/adg3.mp3">
<div class="meta-artist"><span class="the-artist">Tim McMorris</span> - It's a beautiful day</div>
</div>
<script>
jQuery(document).ready(function ($) {
dzsap_init("#apsimple", {
autoplay: "off"
});
});
</script>
cómo colocar play y artist encima de wave (en skin-wave)
Solo agrega la clase piel alternativa hacia reproductor de música elemento
