特定の条件を指定して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

変更frameLooperisPlaying状態

analyser.prototype.frameLooper = function() { 

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

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

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

をチェックし、initMp3Playerので、012を変更します...したがって、遊ぶ/ 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(); 
}