有没有办法在浏览器中使用p5.js来分析spotify歌曲的振幅？
有没有办法在浏览器中使用p5.js来分析spotify歌曲的振幅？
提问于 2018-10-21 13:16:46
我试图将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);}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52912299
复制相关文章
相似问题