如何在附加特定條件的情況下切換requestAnimationFrame函數？

Question

我正在嘗試使用requestAnimationFrame和canvas創建一個模擬視頻分析器。我的設置是建立一個分析器構造器，加載音頻源等。我有一個畫布繪製函數，附加到數組數組更新爲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(); 
}