Reproductor de Audio HTML5 Universal

v3.6.7

Universal HTML5 Audio (o u5a) es un experimento que intenta implementar una interfaz unificada para el reproductor HTML5 de <audio> que se pueda ejecutar en la mayor cantidad de navegadores posible (eso depende de los formatos soportados por tu navegador).

¿Cómo lo uso?

Existen dos formas de utilizar u5a, simple, que sólo requiere agregar un atributo al elemento <audio>, y avanzado, para aquellos que quieran aprovechar todas las características del reproductor.

El atributo preload le entrega al navegador una pista acerca de cómo se quiere manejar la experiencia del usuario. Para un comportamiento consistente entre los distintos navegadores, recomendamos usar preload="metadata" para los archivos de tamaño estático, y ​preload="none" para los flujos de audio.

Declaración simple

Es posible iniciar el reproductor tan sólo agregando data-extend="u5a" a la etiqueta <audio>. Opcionalmente, se puede agregar data-className="class1 class2" para indicar clases para el contenedor.

Ejemplo

Código

HTML

<audio data-extend="u5a" src="https://audio-video.gnu.org/audio/Fenster-Free-Software-Song.ogg" preload="metadata"></audio>

Declaración avanzada

Aquí es posible definir una plantilla personalizada, clases para el contenedor, una lista de orígenes, y extender las funcionalidades de reproductor al poder definir eventos personalizados.

Ejemplo

Código

HTML

<audio id="test" src="https://audio-video.gnu.org/audio/Fenster-Free-Software-Song.ogg" preload="metadata" controls></audio>

JavaScript

var u5a = new UniversalHTML5Audio({
    selector: "test",
    className: "navbar navbar-default container-fluid",
    source_message: "Selecciona versión",
    sources: [{
        name: 'Fenster',
        url: 'https://audio-video.gnu.org/audio/Fenster-Free-Software-Song.ogg'
    }, {
        name: 'Piano',
        url: 'https://www.gnu.org/music/markushaist-free-software-song.ogg'
    }, {
        name: 'Original',
        url: 'https://www.gnu.org/music/free-software-song.ogg'
    }],
    events: {
        play: function () {
            console.log("PLAY");
        }
    }
});
console.log(u5a);

Ejemplo de plantilla personalizada

Se usa un <iframe> para no cargar el CSS para la plantilla estándar.

Código

HTML

<audio id="fenster" src="https://audio-video.gnu.org/audio/Fenster-Free-Software-Song.ogg" preload="metadata"></audio>
<audio id="piano" src="https://www.gnu.org/music/markushaist-free-software-song.ogg" preload="metadata"></audio>
<audio id="original" src="https://www.gnu.org/music/free-software-song.ogg" preload="metadata"></audio>

Plantilla

<script id="custom-template" type="text/x-tmpl">
    <div class="form-inline">
        <div class="u5a-html5-player">
            {%#o.audio%}
        </div>
        <button class="u5a-play btn btn-primary">
            <i class="glyphicon glyphicon-play"></i>
        </button>
        <button class="u5a-pause btn btn-primary hidden">
            <i class="glyphicon glyphicon-pause"></i>
        </button>
        <button class="u5a-stop btn btn-primary hidden">
            <i class="glyphicon glyphicon-stop"></i>
        </button>
        <div class="form-group" style="margin-left:15px">
            <input type="range" max="1" step="0.01" value="1" oninput="{%=o.selector%}.volume=this.value;">
        </div>
    </div>
</script>

JavaScript

new UniversalHTML5Audio({
    selector: "fenster",
    className: "text-center",
    template: "custom-template"
});
new UniversalHTML5Audio({
    selector: "piano",
    className: "text-center",
    template: "custom-template"
});
new UniversalHTML5Audio({
    selector: "original",
    className: "text-center",
    template: "custom-template"
});