웹 오디오 API createMediaElementSource 오디오 태그

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>createMediaElementSource test</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script> 
 
    var audioContext, mediaElementSource, analyzer, analyzerBytes; 
 

 
    function initAudio(audio) { 
 
     if (!audioContext) { 
 
     audioContext = new(window.AudioContext || window.webkitAudioContext)(); 
 
     analyzer = audioContext.createAnalyser(); 
 
     analyzer.connect(audioContext.destination); 
 
     mediaElementSource = audioContext.createMediaElementSource(audio);//when adding this line it breaks 
 
     mediaElementSource.connect(analyzer); 
 
     analyzerBytes = new Uint8Array(analyzer.frequencyBinCount); 
 
     window.setInterval(function() { 
 
      var min = 0, 
 
      max = 0, 
 
      sum = 0, 
 
      avg = 0; 
 
      analyzer.getByteFrequencyData(analyzerBytes); 
 
      for (var i = 0; i < analyzer.frequencyBinCount; i++) { 
 
      min = Math.min(min, analyzerBytes[i]); 
 
      max = Math.max(max, analyzerBytes[i]); 
 
      sum += analyzerBytes[i]; 
 
      } 
 
      avg = Math.round(sum/analyzer.frequencyBinCount); 
 
      document.getElementById('analyzerData').textContent = "" + min + "/" + max + "/" + avg; 
 
     }, 100); 
 
     } 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <audio controls src="song.mp3" onplay="initAudio(this)"></audio> 
 
    <div> 
 
    Analyzer Data: min/max/avg: <span id="analyzerData"></span> 
 
    </div> 
 
</body> 
 

 
</html>

난 그냥 createMediaElementSource 오프라인을 사용했지만 실패를 나누기, 그래서 우리가 그 일을 어떻게 다른 사람들을 보았다. 위에서 똑같은 코드가 온라인에서 작동했지만 다운로드 할 때 이전과 같은 문제가 발생합니다. 실제 createmediaementsources 행을 추가 할 때 오디오 태그는 작동을 멈 춥니 다. 콘솔에 오류가 없습니다. 여기에 오디오 src가 없기 때문에 코드 스 니펫이 여기서는 작동하지 않지만 코드를 볼 수 있도록 snipped를 추가했습니다. http://ruurd.alecm.nl/why.html <은 정상적으로 작동하지만 오프라인은 아닙니다. 그럼 오프라인으로 작동하지 않는 이유는 무엇입니까? 이 프로젝트를 위해 오프라인으로 작업해야합니다.

출처

2015-02-07 RuteNL

당신은 말하지 않았지만, 당신이 Firefox 또는 사파리를 사용하고 있다고 의심됩니다. 내 페이지를 다운로드하고 Chrome에 로컬로로드하면 실제로 효과가있었습니다. 하지만이 문제는 Chrome의 버그라고 생각합니다.

로컬 미디어 파일 (예 : file : // URL)은 웹 페이지가 로컬 파일 인 경우에도 항상 포함 된 웹 페이지와 다른 도메인에있는 것으로 간주됩니다. 그리고 당신이이 문제로 실행 의미 : 그것은 기본적으로 의미

Why aren't Safari or Firefox able to process audio data from MediaElementSource?

이 아닌 파일에서, 웹 서버에서 페이지를로드 할 수 있습니다. 로컬 컴퓨터에 로컬 웹 서버를 설치하여 로컬 파일을 제공 할 수 있습니다.

출처

2015-02-07 20:56:26 aldel

감사! 원본으로 BLOB URL을 사용하여 오프라인으로 작업 할 수있게되었습니다. 이제 로컬 파일 경로에서 blob URL을 만들 수 있는지 확인해야합니다. – RuteNL

서버에서 제공하는 경우에도 Safari에서 createMediaElementSource()를 사용할 수 없습니다. – Ian

웹 오디오 API createMediaElementSource 오디오 태그

답변

관련 문제