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

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

1 个答案: