오디오 파일에서 createMediaElementSource 입력?

Question

스테레오 오디오에서 위상 제거를 빠르게 수행하는 웹 사이트를 만들려고합니다. 위상 상실에 대해 알아 냈을 때 달성 할 수있는 모든 것이 성취했다고 생각했기 때문에 놀라웠다 고 생각 했으므로 온라인상에서보다 재미있게 만들 수 있는지 알고 싶었습니다.

나는 정확히 원하는대로하는 예가있는 this Web Audio API post을 찾았습니다 (노래방 버튼을 누르면). 그러나 조금 느리며 대용량 파일에서는 작동하지 않습니다. The author also mentions this :

는 정말 우리가 정말 자바 스크립트 복잡한 처리를 수행하지 않아야하기 때문에, 더 긴 트랙의 오디오를 조작 할 수 MediaElement를 사용해야합니다.

mediaElement를 사용하려고했지만 시작하는 방법을 알 수 없습니다.

<input type="file" id="upload" accept="audio/*"> 

<script> 
    var upload = document.getElementById("upload"); 
    upload.addEventListener("change", function() { 
     var context = new (window.AudioContext || window.webkitAudioContext)(); 
     var source = context.createMediaElementSource(upload); 
     console.log(source); 
    }); 
</script> 

내가 입력 요소는 오디오 요소와 동일한 아니라는 것을 알고 오류 Failed to execute 'createMediaElementSource' on 'BaseAudioContext': parameter 1 is not of type 'HTMLMediaElement'.

을 얻을, 그래서 난 당신이 MediaElement에로로드 할 수 있는지 이해할 수 없다 :이 시도했다.

도움이 되었으면 좋겠습니다.

Answer 1

createMediaElementSource()은 <audio> 요소가 필요합니다. 따라서 하나를 만들고 파일 데이터를 전달하면 소스가 생성됩니다. 이것에 대한

upload.addEventListener("change", function() { 
 
    fr = new FileReader(); 
 
    fr.readAsDataURL(document.getElementById("upload").files[0]); 
 
    fr.onload = e => { 
 
    var audio = document.createElement('audio'); 
 
    audio.src = e.target.result; 
 
    var context = new(window.AudioContext || window.webkitAudioContext)(), 
 
     source = context.createMediaElementSource(audio); 
 
    console.log(source); 
 
    }; 
 
});

<input id="upload" accept="audio/*" type="file">