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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (160)

我试图将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);

}

提问于
用户回答回答于

使用Spotify的Web Playback SDK无法处理原始数据样本。如下所示,Spotify使用加密媒体扩展,以便在浏览器中进行播放。

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

您可以使用 Spotify Web API端点并尝试可视化其中一个属性。没有实际样本(这是您要求的振幅),但这些数据集包含的内容可能符合您的需求。

我找到了一个reddit线程,其中一些人展示了一些可视化,主要是使用前面提到的API端点。

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

扫码关注云+社区

领取腾讯云代金券