Estoy creando un reproductor de musica. Lo que pretendo es que cuando le de a un boton realice esa acción. He creado eventos que los relacione con determinada funcion depende a la accion que se pulse. Pero en mi caso me falta algo para que funcione... Esto es lo que tengo:
<script>
myAudio = document.getElementById("myAudio");
playAudio = document.getElementById("play");
stopAudio = document.getElementById("stop");
pausarAudio = document.getElementById("pause");
//Añadiendo controles
playAudio.addEventListener('click', playAudio, true);
pausarAudio.addEventListener('click', pausar, true);
stopAudio.addEventListener("click", stopAudio, true);
function playAudio(){
myAudio.load();
myAudio.play();
}
function stopAudio(){
myAudio.pause();
myAudio.currentTime = 0;
}
function pausar(){
myAudio.pause();
}
</script>
<audio id="myAudio" autoplay preload>
<source src="Canciones/adictiva.mp3" type="audio/mp3">
</audio>
<!-- Reproductor MP3 -->
<div class="mp3">
<div class="screen">
<p id="info-track">Adictiva</p>
</div>
<div class="controles">
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>
<button id="primera">Primera</button>
<button id="anterior">Anterior</button>
<button id="siguiente">Siguiente</button>
<button id="ultima">Ultima</button>
<!-- Control para deslizar la barra de volumen y baja o subir volumen -->
<button id="controlVolumen">Control de Volumen</button>
<!-- Control para deslizar la barra para avanzar o retroceder la canción -->
<button>Control deslizar</button>
<button>Aleatorio</button>
</div>
</div>
playBtn
para tu objeto, es más legible.playAudio = document.getElementById("play");
y yo los colocaría así:playBtn = document.getElementById("play");
. Esto es porque luego declaras tus funcionesplayAudio
,pauseAudio
, etc. Y los nombres ya han sido declarados para tus objetos. No se si captas lo que trato de decirte. No puedes usar el mismo nombre para tus objetos y para tus funciones.