Estoy tratando de agregar un botón de detener y reproducir para un elemento de audio en javascript como se muestra a continuación.
Tal como está, el audio comienza automáticamente al cargar la página con la reproducción automática configurada y me gustaría poder usar el ícono de detener para detener la transmisión y luego el ícono de reproducción para comenzar de nuevo.
Con el siguiente código, puedo hacer que la transmisión de audio se inicie automáticamente como se esperaba y también funciona el ícono de parada, pero si agrego código para intentar que la transmisión comience nuevamente, no funcionará. Al revisar la consola, ni siquiera parece reconocer el botón de parada, solo el botón de reproducción (cuando agrego el ícono de reproducción).
<head> <script type="text/javascript"> window.onload = function() { var a = document.getElementById("audiostop"); a.onclick = function() { var player = document.getElementById('radio'); player.pause(); console.log("Pressed Stop"); return false; } } </script> </head> <body> <a id="audiostop" class="fa fa-stop" style="color: #ed1a42;"></a> <a id="audiostart" class="fa fa-play" style="color: #ed1a42;"></a> <audio controls id="radio" autoplay loop height="" width=""> <source src="<?php echo $player_stream; ?>" type="audio/mpeg"> </audio> </body>Si agrego esto:
<script type="text/javascript"> window.onload = function() { var a = document.getElementById("audiostart"); a.onclick = function() { var player = document.getElementById('radio'); player.start(); console.log("Pressed Start"); return false; } } </script>Entonces solo el ícono de 'reproducir' se registra en la consola como funcionando, el de 'detener' deja de funcionar.
No estoy muy familiarizado con Javascript, ¿alguien puede echarme una mano?
Gracias.
En una etiqueta de secuencia de comandos, ¿qué sucede si intenta esto?
window.onload = function () { var player = document.getElementById("radio"); var start = document.getElementById("audiostart"); var stop = document.getElementById("audiostop"); start.onclick = function () { player.play(); console.log("Pressed Start"); }; stop.onclick = function () { player.pause(); console.log("Pressed Stop"); }; };