从嵌入式 soundcloud 元素中获取声音数据

Question

我有一个嵌入了 soundcloud 元素的小网页，我想做一个频谱分析仪。到目前为止，我已经成功地制作了一个只使用本地声音文件的文件，但我不知道如何从嵌入的元素中获取音频数据。

有没有办法从嵌入的元素中提取声音数据？

如果这不是一项简单的任务，那么如果可能的话，能够分析当前正在浏览器中播放的声音同样令人满意。

提前致谢：)

代码（不是我写的，大部分都是从教程中找到的）

HTML（嵌入式 soundcloud 标签）

<iframe id="em1" width="100%" height="450" scrolling="no" frameborder="no"     src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/144737157&amp;auto_play=false&amp;hide_related=false&amp;visual=true"></iframe>

JS，我希望以某种方式将 SoundCloudAudioSource 附加到嵌入式标签或整个浏览器窗口。

var SoundCloudAudioSource = function(audioElement) {
var player = document.getElementById(audioElement);
var self = this;
var analyser;
var audioCtx = new (window.AudioContext || window.webkitAudioContext); // this is because it's not been standardised accross browsers yet.
analyser = audioCtx.createAnalyser();
analyser.fftSize = 256; // see - there is that 'fft' thing. 
var source = audioCtx.createMediaElementSource(player); // this is where we hook up the <audio> element
source.connect(analyser);
analyser.connect(audioCtx.destination);
var sampleAudioStream = function() {
    // This closure is where the magic happens. Because it gets called with setInterval below, it continuously samples the audio data
    // and updates the streamData and volume properties. This the SoundCouldAudioSource function can be passed to a visualization routine and 
    // continue to give real-time data on the audio stream.
    analyser.getByteFrequencyData(self.streamData);
    // calculate an overall volume value
    var total = 0;
    for (var i = 0; i < 80; i++) { // get the volume from the first 80 bins, else it gets too loud with treble
        total += self.streamData[i];
    }
    self.volume = total;
};
setInterval(sampleAudioStream, 20); // 
// public properties and methods
this.volume = 0;
this.streamData = new Uint8Array(128); // This just means we will have 128 "bins" (always half the analyzer.fftsize value), each containing a number between 0 and 255. 
this.playStream = function(streamUrl) {
    // get the input stream from the audio element
    player.setAttribute('src', streamUrl);
    player.play();
}

};

Answer 1

有没有办法从嵌入元素中提取声音数据？

没有。

如果这不是一项简单的任务，那么如果可能的话，能够分析当前正在浏览器中播放的声音同样令人满意。

这也是不可能的。

Answer 2

感谢您的代码。

一个想法：

iframe src 字段具有访问 mp3 文件的相关信息：

src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/144737157&auto_play=false&hide_related=false&visual=true"

曲目 ID：144737157

使用他们的 SDK 使用该信息：

SC.stream("/tracks/144737157",{autoLoad: true,  onload: function(){ this.play(); }});

或直接： 您将被转发 (302) 到 aws：

http://api.soundcloud.com/tracks/144737157/stream?client_id=201b55a1a16e7c0a122d112590b32e4a

Answer 3

this.playStream = function(streamUrl) {
    // get the input stream from the audio element
    player.setAttribute('src', streamUrl);
    player.play();
}

关键是您不能直接将 streamUrl 传递/使用到您自己的音频播放器中。

因为实际上流 URL 不是您希望播放的歌曲的终点 URL。当您向流 url 发送 http 请求时，歌曲的实际音频（mp3 格式）正在“按需”创建。

之后，您将被重定向到作为物理路径的歌曲的端点 URL，您可以使用通过发送 http 请求检索到的端点 URL 来播放/分析它。关键是，音频的这个端点 URL 有一个过期时间，即 sth。比如10-15分钟。

要实现我在这里所说的，你将不得不做一些类似的技巧： （不知道你会如何在 JavaScript 中做到这一点，但它会给你这个想法）

public void Run()
        {
            if (!string.IsNullOrEmpty(TrackUrl))
            {
                HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(TrackUrl + ".json?client_id=YOUR_CLIENT_ID");
                request.Method = "HEAD";
                request.AllowReadStreamBuffering = true;
                request.AllowAutoRedirect = true;
                request.BeginGetResponse(new AsyncCallback(ReadWebRequestCallback), request);
            }
        }

        private void ReadWebRequestCallback(IAsyncResult callbackResult)
        {
            HttpWebRequest myRequest = (HttpWebRequest)callbackResult.AsyncState;
            HttpWebResponse myResponse = (HttpWebResponse)myRequest.EndGetResponse(callbackResult);


            using (StreamReader httpwebStreamReader = new StreamReader(myResponse.GetResponseStream()))
            {
                this.AudioStreamEndPointUrl = myResponse.ResponseUri.AbsoluteUri;
                this.SearchCompleted(this);
            }
            myResponse.Close();

        }

AudioStreamEndPointUrl 是您的 mp3 音频将在接下来的 15-20 分钟内驻留的实际 URL。请注意，每次您想要流式传输歌曲时，都必须重新请求端点 URL。

最后我建议你不要在互联网上传播你的 API 密钥；而是键入 CLIENT_ID。

Answer 4

我认为 JustGoscha 的链接指向了正确的方向。 但是这个audio-visualization-with-web-audio-canvas-and-the-soundcloud-api 链接应该可以满足您的需求。