Как переключить функцию requestAnimationFrame при определенных условиях?

Question

Я пытаюсь построить макет аудиовизуального анализатора с использованием requestAnimationFrame и холста. Моя настройка заключается в создании конструктора анализатора, загрузки источника звука и т. Д. У меня есть функция рисования холста, которая привязана к массиву чисел, обновляемых по мере запуска requestAnimationFrame. Я хотел бы включить эту анимацию вкл/выкл с помощью кнопки воспроизведения музыки/паузы.

Я попытался создать пользовательскую кнопку, которая включает/выключает музыку и переменную, которая отслеживает состояние isPlaying, но не может успешно привязать ее к анимационной функции. https://jsfiddle.net/kshatriiya/p8u5h3dz/6/ Я не могу найти подходящий источник mp3 в Интернете, поэтому, пожалуйста, поместите источник в создание объекта в конце.

<div id="playlist-container"> 
     <div id="mp3_player"> 
     <div id="audiobox"> 
      <canvas id="analyser"></canvas> 
     </div> 
     </div> 
</div> 

JS

var canvas, ctx, source, context, bars, bar_x, bar_width, bar_height; 
var frameArray = [0, 0, 0, 0, 0, 0]; 
var analyser = function(source, fps, element) { 

this.fpsInterval = 1000/fps; 
this.source = source; 
this.element = element; 
this.audio = new Audio(); 
this.audio.src = this.source; 
this.audio.controls = false; 
this.isPlaying = false; 
} 

analyser.prototype.buildframeArray = function() { 
var origin = 6; 
for (var i= 0; i < 6; i++) { 
frameArray[i] = Math.floor((Math.random() * 100) + 70); 
} 
} 

analyser.prototype.frameLooper = function() { 

window.requestAnimationFrame(this.frameLooper.bind(this)); 

now = Date.now(); 
elapsed = now - then; 

if (elapsed > fpsInterval) { 
then = now - (elapsed % fpsInterval); 

this.buildframeArray(); 

ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.fillstyle = "white"; 
bars = 20; 
for (var i = 0; i < bars; i++) { 

bar_x = i*20; 
bar_width = 20; 
bar_height = -(frameArray[i]/2); 
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); 

} 
} 
} 

analyser.prototype.setFps = function() { 

fpsInterval = 200; 
then = Date.now(); 
startTime = then; 
this.frameLooper(); 
} 

analyser.prototype.initMp3Player = function() { 

document.getElementById(this.element).appendChild(this.audio); 
var playButton = document.createElement("BUTTON"); 
playButton.innerHTML = "Play/Pause"; 
document.getElementById(this.element).appendChild(playButton); 
var self = this.audio; 
canvas = document.getElementById("analyser"); 
ctx = canvas.getContext("2d"); 
playButton.addEventListener("click", function() { 

if (!self.isPlaying) { 
    self.play(); 
    self.isPlaying = true; 

} else { self.pause(); self.isPlaying = false;} 

}); 
this.setFps(); 
} 

var audioOne = new analyser("FeintWords.mp3", 5, "audiobox"); 

audioOne.initMp3Player(); 

CSS

#playlist-container{ 

width: 100vw; 
height: 300px; 
display: flex; 
flex-direction: row; 
align-content: center; 
align-items: center; 
justify-content: center; 
} 

#mp3_player, #audiobox { 
background-color: gray; 
height: 100%; 
width: 60%; 
display: flex; 
flex-direction: row; 
align-content: center; 
align-items: center; 
justify-content: center; 

} 

#analyser { 

height: 100px; 
width: 150px; 
background: #002D3C; 
} 

button { 
width: 150px; 
height: 50px; 
} 

Answer 1

изменение frameLooper для проверки состояния isPlaying

analyser.prototype.frameLooper = function() { 

    window.requestAnimationFrame(this.frameLooper.bind(this)); 

    now = Date.now(); 
    elapsed = now - then; 

    if (this.isPlaying && elapsed > fpsInterval) { 
    ... etc 

И изменить initMp3Player так self = this ... поэтому воспроизведение/пауза аудио потребности ссылаться на self.audio.play()/self.audio.pause()

analyser.prototype.initMp3Player = function() { 

    document.getElementById(this.element).appendChild(this.audio); 
    var playButton = document.createElement("BUTTON"); 
    playButton.innerHTML = "Play/Pause"; 
    document.getElementById(this.element).appendChild(playButton); 
    var self = this; // self is this, not this.audio 
    canvas = document.getElementById("analyser"); 
    ctx = canvas.getContext("2d"); 
    playButton.addEventListener("click", function() { 

     if (!self.isPlaying) { 
      self.audio.play(); // <= changed 
      self.isPlaying = true; 

     } else { 
      self.audio.pause(); // <= changed 
      self.isPlaying = false; 
     } 

    }); 
    this.setFps(); 
}