Question

我试图将Spotify可视化器作为一个个人项目，但似乎找不到在通过浏览器播放声音之前分析声音的方法。我让Spotify播放器通过浏览器播放音乐，并且可视化器正在处理存储在机器上的mp3文件。我只是对如何将两者连接一无所知。另外，我浏览了Spotify API，似乎也找不到任何东西。

如果无法直接分析Dpotify轨道，是否有任何方法可以先捕获通过浏览器播放的声音，然后再通过p5.js loadSound（）函数播放？

以下是供参考的代码段：

<!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的服务条款是否允许处理这些样本。但是由于您正在浏览器中寻找客户端方面的内容，因此不符合您的需求。

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

1 个答案: