Блог

Главная - Вопросы по программированию - Добавление кнопок остановки/воспроизведения в javascript для звукового элемента

Добавление кнопок остановки/воспроизведения в javascript для звукового элемента

#javascript #html5-audio

Вопрос:

Я пытаюсь добавить кнопку остановки и воспроизведения для звукового элемента в javascript, как показано ниже.

Как бы то ни было, звук автоматически запускается при загрузке страницы с установленным автозапуском, и я хотел бы иметь возможность использовать значок остановки, чтобы остановить поток, а затем значок воспроизведения, чтобы запустить его снова.

С помощью приведенного ниже кода я могу запустить автозапуск аудиопотока, как и ожидалось, а также значок остановки, но если я добавлю код, чтобы попытаться запустить поток снова, он не будет работать. Проверяя консоль, кажется, что она вообще не распознает кнопку «Стоп», только кнопку «Воспроизведение» (когда я добавляю значок «Воспроизведение»).

 <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>    
    amp;nbsp; <a id="audiostop" class="fa fa-stop" style="color: #ed1a42;"></a>
    amp;nbsp; <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>

Если я добавлю это:

 <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>

Тогда только значок «воспроизведение» регистрируется в консоли как рабочий, значок «стоп» перестает работать.

Я не слишком хорошо знаком с Javascript, может кто-нибудь помочь?

Спасибо.

Ответ №1:

В одном теге сценария, что произойдет, если вы попробуете это сделать?

 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");
  };
};

Комментарии:

1. Спасибо, что нашли время ответить. Я получаю эту ошибку Uncaught TypeError: player.start is not a function at HTMLAnchorElement.start.onclick при нажатии кнопки воспроизвести. Остановка действительно останавливается, но при нажатии кнопки воспроизвести я получаю эту ошибку. Спасибо

2. Я переоделся player.start player.play , и это сработало, спасибо!

Метки: