0

Encontre esto en un articulo del 2017 pero evidentemente me esta faltando algo.

<audio id="mireproductor" src="bat.mp3" type="audio/mpeg"></audio>
<div>
    <button onclick="document.getElementById('player').play()">Play</button>
    <button onclick="document.getElementById('player').pause()">Pausa</button>
    <button onclick="document.getElementById('player').load()">Stop</button>
    <button onclick="document.getElementById('player').volume += .1">Subir volumen</button>
    <button onclick="document.getElementById('player').volume -= .1">Bajar volumen</button>
</div> 
4

2 respuestas 2

1

Para insertar un audio lo único que necesitas es la primera línea.

Con el atributo autoplay puedes hacer que se reproduzca solo. Y con controls el navegador te brinda una interfaz para controlarlo.


En caso que quieras usar tus propios controles, el código que compartiste tiene un pequeño inconveniente.

El ID del reproductor es mireproductor, pero en el script intentas acceder a el como player. Con cambiar el ID ya estará arreglado.

<audio id="player" src="" controls></audio>

<div>
    <button onclick="document.getElementById('player').play()">Play</button>
    <button onclick="document.getElementById('player').pause()">Pausa</button>
    <button onclick="document.getElementById('player').load()">Stop</button>
    <button onclick="document.getElementById('player').volume += .1">Subir volumen</button>
    <button onclick="document.getElementById('player').volume -= .1">Bajar volumen</button>
</div>

Aunque funciona, no es la mejor manera de implementarlo. A cada rato usa getElementById y el volumen puede salirse del rango 0-1 produciendo un error.

Puedes hacer algo como te propuso @jbort.

1
  • Muchas gracias!
    – MarcoXXX
    Commented el 5 may. 2022 a las 15:42
0

Intenta ponerlo de esta manera, también se recomienda subir el audio en distintos formatos por los navegadores. No se si la ruta que tienes correcta, supongo que si. El javascript no se recomienda ponerlo en linea.
HTML

<audio id="player">
    <source src="bat.mp3" type="audio/mp3">
    </audio>


<div>
    <button id= 'play' onclick= "play()">Play</button>
    <button id='pause' onclick="pause()">Pausa</button>
    <button id='subir' onclick="subir()">Subir volumen</button>
    <button id='bajar' onclick="bajar()">Bajar volumen</button>
</div> 

JS

<script>

    function play(){
    player.play();
}

function pause(){
    player.pause();
}

function subir(){
    player.volume += 0.1;
}

function bajar(){
    player.volume -= 0.1;
}


</script>

Puedes encontrar mas información de métodos de audio y video aquí https://www.w3schools.com/tags/ref_av_dom.asp

3
  • Te falta el getElement.
    – Mateo
    Commented el 5 may. 2022 a las 15:37
  • Muchas gracias!
    – MarcoXXX
    Commented el 5 may. 2022 a las 15:43
  • Si te funciono, puedes dar la respuesta como correcta. Puede parecer una tonteria, pero ayuda a las demas personas cuando buscan soluciones en esta red. Aparte de que motiva a seguir intentando ayudar. Gracias.
    – jbort
    Commented el 5 may. 2022 a las 18:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.