有没有办法在浏览器中使用 p5.js 分析Spotify歌曲的振幅？

Question

我正在尝试将 Spotify 可视化器作为个人项目，但似乎无法找到在通过浏览器播放声音之前对其进行分析的方法。我让 Spotify 播放器通过浏览器播放音乐，并且可视化器正在处理存储在我机器上的 mp3 文件。我只是不知道如何将两者联系起来。此外，我查看了 Spotify API，似乎也找不到任何东西。

如果没有办法直接分析一个Dpotify音轨，有没有办法先捕捉通过浏览器播放的声音，然后通过p5.js的loadSound()函数播放？

这里是sn-ps的代码供参考：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"> 
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.js"></script>
</head>

 <body>
<script src="https://sdk.scdn.co/spotify-player.js"></script>
<script>
    window.onSpotifyWebPlaybackSDKReady = () => {
        const token =
            'redacted';
        const player = new Spotify.Player({
            name: 'Web Playback SDK Quick Start Player',
            getOAuthToken: cb => {
                cb(token);
            }
        });

        // Error handling
        player.addListener('initialization_error', ({
            message
        }) => {
            console.error(message);
        });
        player.addListener('authentication_error', ({
            message
        }) => {
            console.error(message);
        });
        player.addListener('account_error', ({
            message
        }) => {
            console.error(message);
        });
        player.addListener('playback_error', ({
            message
        }) => {
            console.error(message);
        });

        // Playback status updates
        player.addListener('player_state_changed', state => {
            console.log(state);
        });

        // Ready
        player.addListener('ready', ({
            device_id
        }) => {
            console.log('Ready with Device ID', device_id);
        });

        // Not Ready
        player.addListener('not_ready', ({
            device_id
        }) => {
            console.log('Device ID has gone offline', device_id);
        });

        // Connect to the player!
        player.connect();
    };
</script>
<script src="visualizer.js"></script>

var spotifyToken = ""
 //["streaming", "user-read-birthdate", "user-read-email", "user-read-private"]
var song;
var amp;
var button;

var volHistory = [];

function toggleSong(){
if (song.isPlaying()){
    song.pause();
} else {
    song.play();
}
}

function preload(){
soundFormats('mp3');
song = loadSound('backgroundsong.mp3')
}

function setup(){
var canvas = createCanvas(window.innerWidth/2, 100);  
//canvas.parent('div id')
canvas.position(0, (windowHeight - height) / 2)
//var canvasLeft = createCanvas(window.innerWidth/2, 100);
//canvasLeft.position(windowWidth/2, (windowHeight - height) / 2)
//createCanvas(window.innerWidth, window.innerHeight);
masterVolume(0.002,0,0);
button = createButton('toggle');
button.mousePressed(toggleSong);
song.loop();

amp = new p5.Amplitude();
 }

function draw(){
background(0);
var volume = amp.getLevel();
volHistory.push(volume * 400);

beginShape();
stroke(0, 255, 0);
strokeWeight(3);
strokeCap(ROUND);
strokeJoin(ROUND);
noFill();
for (var i = 0; i < volHistory.length; i++) {
    var y = map(volHistory[i], 0, 1, height, 0);
    vertex(i*1.5, y);
    if (i*1.5 > width) {
        volHistory.splice(0, 1);
    }
}
endShape();




//ellipse(400, 400, volume * 800, volume * 800);

}

Answer 1

使用 Spotify 的 Web Playback SDK 无法处理原始数据样本。如以下引文所示，Spotify 使用加密媒体扩展来实现在浏览器中的播放。

Web Playback SDK 是客户端 JavaScript 库，可让您在 Spotify Connect 中创建新播放器，并通过 Encrypted Media Extensions 在浏览器中播放来自 Spotify 的任何音轨。

---

您可以使用this Spotify Web API 端点并尝试可视化其中一个属性。没有实际样本（这将是您要求的幅度），但这些数据集包含的内容可能会满足您的需求。

我发现了一个reddit thread，其中一些人主要使用前面提到的 API 端点展示了一些可视化。

---

另一种选择是使用 Spotify 的 Android 或 iOS SDK，您可以在其中访问原始数据样本，但我不确定 Spotify 的服务条款是否允许处理这些样本。但是由于您正在浏览器中寻找客户端的东西，这不符合您的需求。