임베디드 사운드 클립 요소에서 사운드 데이터 가져 오기

Question

사운드 클라우드 요소가 포함 된 작은 웹 페이지가 있는데 주파수 스펙트럼 분석기를 만들고 싶습니다. 지금까지는 로컬 사운드 파일을 사용하는 데 성공했지만, 임베디드 요소에서 오디오 데이터를 가져 오는 방법을 알 수는 없습니다.

임베디드 요소에서 사운드 데이터를 추출하는 방법이 있습니까?

간단한 작업이 아니라면 가능한 경우 브라우저에서 현재 재생중인 사운드를 분석 할 수 있으면 만족 스럽습니다. 사전에

감사합니다 :)

정말 날에 의해 작성된 코드가 아닌은 (내가

) 튜토리얼에서 대부분 발견 된 HTML (내장 사운드 클라우드 태그)

<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

고맙습니다.

하나의 아이디어 :

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를 사용하여 해당 정보를 사용하여 :

iframe이 SRC 필드는 MP3 파일에 액세스 할 수있는 관련 정보를 갖고

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

또는 직접 :,당신은 AWS로 (302)에 전달됩니다 :

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(); 
} 

요점은 그냥 통과/자신의 audioPlayer에 직접 streamUrl를 사용할 수 있다는 것입니다.

실제로 스트림 URL은 재생할 예정인 노래의 끝점 URL이 아니기 때문에 스트림 URL에 http 요청을 보내면 노래의 실제 오디오 (mp3 형식)가 '주문형'으로 만들어집니다.

이후 실제 경로 인 노래의 끝점 URL로 리디렉션되고 있으며 HTTP 요청 전송을 통해 검색된이 끝점 URL을 사용하여 재생/분석 할 수 있습니다. 중요한 점은 오디오의이 끝점 URL에 sth 인 만료 시간이 있다는 것입니다. 10 ~ 15 분. (자바 스크립트에서이 작업을 수행 할 것입니다하지만 당신에게 아이디어를 제공하는 방법을 확실하지 않음)

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 링크는 사용자의 요구를 충족시켜야합니다.