Отключение кнопки воспроизведения / паузы, пока не будет установлено соединение с аудио - PullRequest
Новая
       17

Отключение кнопки воспроизведения / паузы, пока не будет установлено соединение с аудио

0 голосов
/ 08 января 2019

Нажатие Set для пустого ввода текста не должно изменять svg на паузу

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

Для его изменения должен быть .src поток .

Код: https://jsfiddle.net/vhgL96se/23/

Это аудиопоток: http://hi5.1980s.fm/;

Кнопка паузы не должна отображаться без потока src .

Какой хороший способ сделать это?

Я хочу отключить кнопку воспроизведения / паузы, пока не будет установлено соединение с аудио.

enter image description here

(function iife() {
    "use strict";
    const player = document.getElementById("player");
    const button = document.getElementById("button");
    const value = document.getElementById("input");
    const sent = document.getElementById("sent");
    const input = document.getElementById("clear");

    function playPauseIcon(play) {
        if (play) {
            button.classList.add("is-playing");
        } else {
            button.classList.remove("is-playing");
        }
    }
    button.addEventListener("click", function () {
        if (player.paused) {
            player.play();
            playPauseIcon(true);
        } else {
            player.pause();
            playPauseIcon(false);
        }
    });
    button.addEventListener("mousedown", function (evt) {
        if (evt.detail > 1) {
            evt.preventDefault();
        }
    }, false);
    sent.addEventListener("click", function () {
        player.src = value.value;
        player.volume = 1.0;
        playPauseIcon(true);     
    });
    input.addEventListener("click", function () {
        value.value = "";
          button.classList.remove("is-playing");
          player.pause();
    }, false);
}());

1 Ответ

0 голосов
/ 08 января 2019

Вы можете взять одну переменную и использовать ее для onloadstart события аудио 

let canPlay = false;
player.onloadstart  = function() {
    canPlay = true;
  };

и проверь вот так 

 button.addEventListener("click", function() {
    if(!canPlay){return};
    if (player.paused) {
      player.play();
      playPauseIcon(true);
    } else {
      player.pause();
      playPauseIcon(false);
    }
  });

Снова включите очистку 

input.addEventListener("click", function() {
    value.value = "";
    button.classList.remove("is-playing");
    player.pause();
    canPlay = false;
  }, false);

Демо

...