JavaScript | Не функционирует .pause()

299

14 октября 2017, 20:43

Приветствую.

Решил сделать проигрыватель радио на сайте. В JS не силён, потому пришлось писать с нуля, используя различные источники. В конечном итоге получилось примерно следующее:

function playAudio(){ 
  var play = document.getElementById("play"); 
  var pause = document.getElementById("pause"); 
  var audio = document.createElement('audio'); 
  audio.src = 'адрес_потока'; 
 
    if(pause != null){ 
      audio.play(); 
 
      document.getElementById("pause").remove(); 
 
      var div = document.createElement('div'); 
      div.className = "d5"; 
      div.setAttribute("id", "play"); 
      document.querySelector(".d1").appendChild(div); 
 
      var div2 = document.createElement('div'); 
      div2.className = "d5-2"; 
      div2.setAttribute("id", "play"); 
      document.querySelector(".d1").appendChild(div2); 
      } 
 
    else if(play != null){ 
      audio.pause(); 
 
      document.getElementById("play").remove(); 
      document.getElementById("play").remove(); 
 
      var div = document.createElement('div'); 
      div.className = "d6"; 
      div.setAttribute("id", "pause"); 
      document.querySelector(".d1").appendChild(div); 
    } 
}

HTML-код:

<div class="d1" OnClick="playAudio();">
                <div class="d6" id="pause"></div>
</div>

Всё функционирует в полном объёме, за исключением паузы (audio.pause();). Выполняется весь код, указанный в условии, но данный фрагмент будто уходит из виду. После повторного нажатия на кнопку запускается ещё один поток "поверх" предыдущего.

Буду благодарен, если подскажете, где может быть ошибка.

Answer 1

Когда вызывается playAudio и сколько раз?

Это зачем var audio = document.createElement('audio');?

Второй вызов document.getElementById("play").remove(); подряд - интересно что будет делать?

Подсказываю, где может быть ошибка.

Событие click - всплывающее, то есть нажатие на div-ы play и pause будет вызывать обработку щелчка и у родителя - div class="d1". Cледовательно, функция playAudio будет вызываться снова, создавая каждый раз новый var audio = document.createElement('audio');.

Answer 2

Ты проверяешь не правильно. В условии IF пропиши не if(pause != null), а так if (audio.paused == true) и должно все работать