Reproduzca audio y reinícielo con un clic

2 minutos de lectura

avatar de usuario de user2340767
usuario2340767

Estoy buscando reiniciar un archivo de audio en un reproductor de audio HTML5. He definido un archivo de audio y un play botón.

<audio id="audio1" src="https://stackoverflow.com/questions/17636310/01.wav"></audio>
<button onClick="play()">Play</button>

Cuando hago clic en el play botón, el archivo de audio comienza a reproducirse, pero cuando vuelvo a hacer clic en el botón, el archivo de audio no se detiene y no se volverá a reproducir hasta que llegue al final del archivo.

function play() {
    document.getElementById('audio1').play();
}

¿Hay algún método que me permita reiniciar el archivo de audio cuando hago clic en el botón usando onclick en lugar de esperar a que la canción se detenga?

Para simplemente reiniciar la canción, harías:

function play() {
    var audio = document.getElementById('audio1');
    if (audio.paused) {
        audio.play();
    }else{
        audio.currentTime = 0
    }
}

VIOLÍN

Para alternarlo, como en el audio se detiene al hacer clic nuevamente, y cuando se vuelve a hacer clic se reinicia desde el principio, haría algo más como:

function play() {
    var audio = document.getElementById('audio1');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}

VIOLÍN

  • Pero, ¿qué sucede si está trabajando con varios archivos y/o botones?

    – Rafael

    16/02/2015 a las 20:00

soundManager.setup({
preferFlash: false,
//, url: "swf/"
onready: function () {
    soundManager.createSound({
        url: [
            "http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3", "http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg"
        ],
        id: "music"
    });
    soundManager.createSound({
        url: [
            "http://www.w3schools.com/html/horse.mp3", 
        ],
        id: "horse"
    });
    soundManager.play("music"); 
}

}).beginDelayedInit();

Y para iniciar horse y pausar todos los demás sonidos que se están reproduciendo actualmente en un evento de clic:

$("#horse").click(function () {
soundManager.stopAll();
soundManager.play("horse");

});

function sound(src) {
    this.sound = document.createElement("audio");
    this.sound.src = src;
    this.sound.setAttribute("preload", "auto");
    this.sound.setAttribute("controls", "none");
    //this.sound.style.display = "none";
    document.body.appendChild(this.sound);
    this.play = function () {
        this.sound.play();
    }
    this.stop = function () {
        this.sound.pause();
        this.sound.currentTime = 0
    }
}

puede usar la función /arriba para reproducir sonido

 let mysound1 = new sound('xyz.mp3')
 mysound1.play()

¿Ha sido útil esta solución?