Javascript 如何在附加某些条件的情况下切换requestAnimationFrame函数？

我正在尝试使用requestAnimationFrame和canvas构建一个模拟视听分析器。我的设置是建立一个分析器构造器，加载音频源等。我有一个canvas draw函数，它附加到数字数组中，随着requestAnimationFrame的运行而更新。我希望能够通过音乐播放/暂停按钮打开/关闭动画

我尝试过制作一个自定义按钮来切换音乐的开/关，以及一个变量来跟踪显示状态，但无法成功地将其附加到动画功能。 我在网上找不到合适的mp3源，所以请在末尾的对象创建处放置一个源

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

---

更改

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

so

self=this

。。。因此，播放/暂停音频需要在

self.audio.play（）/self.audio.pause（）上调用

analyzer.prototype.initMp3Player=函数（）{
document.getElementById（this.element）.appendChild（this.audio）；
var playButton=document.createElement（“按钮”）；
playButton.innerHTML=“播放/暂停”；
document.getElementById（this.element）.appendChild（playButton）；
var self=this；//self是this，不是this.audio
canvas=document.getElementById（“分析器”）；
ctx=canvas.getContext（“2d”）；
playButton.addEventListener（“单击”，函数（）{
如果（！self.isplay）{
self.audio.play（）；//
var self=this.audio；
看起来可疑，因为
isplay
属性位于
this
上，而不是
this.audio
上。您说过，
this.isplay
除了跟踪播放/暂停的状态之外，没有其他用途-您是如何尝试的“将其附加到动画功能"，我看不到有任何尝试，成功，或者，正如你所说，没有成功。嗨，是的，变量在那里，我用它来处理if语句。我删除了if语句，因为它们不起作用。我只是忘记删除isPlaying变量，它没有在atm中使用。编辑：Ops，我说的是什么，变量实际上是用来停止/pau的用按钮关闭音频。音频停止/暂停功能工作，但我找不到一种方法来实现与requestAnimationFrame类似的方法。完美无缺！非常感谢。我有self=this；最初，在尝试各种if语句后忘记将其更改回去。再次感谢您的帮助！
#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;
}

analyser.prototype.frameLooper = function() {

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

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

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

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();
}