如何将音乐从流媒体服务传递到 HTML5 <audio> 元素？

Question

先post来了！我是 JS 的菜鸟，但我正在努力改进。所以，我正在使用 vanilla JS 构建 this 音频可视化工具。我仍然需要在 CSS 上工作，但我现在对它很满意 - 它可以很好地可视化预加载歌曲的 FFT 数据（取自免费音乐档案）

我现在想将 Spotify 等流媒体服务连接到可视化工具，以便可视化来自流媒体服务的音乐。但我不确定该怎么做。我正在使用网络音频 API 来分析声音。

如果有人能提供一些指导，我将不胜感激，谢谢！

注意：网站尚不能在移动设备上运行，抱歉。

Answer 1

我认为您需要使用类似 Spotify Web 的东西 API。

可在此处找到快速入门指南：

https://developer.spotify.com/documentation/web-api/quick-start/

如果你想要一个例子，这是另一个开源项目，它似乎已经完成了你想要做的事情：

https://github.com/jamescastells/jamescastells.github.io

Answer 2

Spotify 使用 Encrypted Media Source Extensions (see Building Spotify's New Web Player) and I'm not sure if they openly let us access their protected music. Would be great if they do and anyone can find out how. Media Source Extensions 是一个很好的选择，可以将编码的音频（Opus、MP3 等）块以编程方式提供给 <audio>，以便浏览器对其进行解码。我会考虑调查提供免费音乐的音乐服务，例如 BandCamp 或 Soundcloud。

MSE 容器支持因浏览器而异，您可以查看

MediaSource.isTypeSupported('audio/webm; codecs="opus"');
MediaSource.isTypeSupported('audio/aac; codecs="opus"');
MediaSource.isTypeSupported('audio/mp4; codecs="opus"');

如何将音乐从流媒体服务传递到 HTML5 <audio> 元素？

How to pass music from a streaming service into HTML5 <audio> element?

javascript

spotify

html5-audio

web-audio-api