JavaScript/HTML5 오디오 : Android의 파일 선택기를 통해 사용자가 MP3 파일을 재생합니다. Chrome

Question

사용자가 PC 또는 태블릿에서 로컬 오디오 파일을 선택할 수있는 사이트를 만들고 (파일을 서버에 업로드하지 않고) HTML5 오디오 태그를 사용하여 해당 파일을 재생합니다 (사용자가 버튼을 클릭하여 재생하면 자동 재생 기능이 필요하지 않습니다). 나는이 브라우저가 필요한 모든 것을 지원해야한다는 사실에도 불구하고 안드로이드 크롬 버전에서 이것을 달성 할 수 없다. Chrome의 데스크톱 버전에서는 작동합니다.

는 그 파일을로드하는 방법을 다른 방법을 시도 : 자바 스크립트 FileReader를 통해

1. 을 - 당신은 여기 바이올린 수 있습니다 http://liveweave.com/2kOWoz

   URL.createObjectURL를 통해

   function handleFileSelect(evt) { 
       var files = evt.target.files; // FileList object 
       playFile(files[0]); 
   } 
   
   function playFile(file) { 
       var freader = new FileReader(); 
   
       freader.onload = function(e) { 
        player.src = e.target.result; 
       }; 
   
       freader.readAsDataURL(file); 
   } 
   
   player = document.getElementById('player'); 
   document.getElementById('files').addEventListener('change', handleFileSelect, false); 
   document.getElementById('play').onclick = function(){ player.play(); }; 
   

2. - 여기에 편집 : http://liveweave.com/4y84XV 두 번째 것은 첫 번째 것과 매우 비슷합니다. playFile 함수는 다음과 같습니다.

   function playFile(file) { 
       player.src = URL.createObjectURL(file); 
   } 
   

이러한 예제에는 어떤 문제가 있습니까? 기대되는 결과를 얻는 다른 방법이 있습니까? 나는 어떤 힌트 나 아이디어도 감사 할 것입니다. 감사.

Answer 1

오디오 API가 작동하는지 (HTML5 <audio> 이전) 존재하는지 확인해보십시오. 그것은 직접 간단 인 WAV를로드, 예를 들어 ArrayBuffer의

읽을 수 있습니다

HTML :

<input id="files" type="file" id="files" name="files[]" multiple /> 

에 javscript :

window.AudioContext = window.AudioContext || window.webkitAudioContext; 
var context = new window.AudioContext(); 
var source; 
function playSound(arraybuffer) { 
    context.decodeAudioData(arraybuffer, function (buf) { 
     source = context.createBufferSource(); 
     source.connect(context.destination); 
     source.buffer = buf; 
     source.start(0); 
    }); 
} 

function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 
    playFile(files[0]); 
} 

function playFile(file) { 
    var freader = new FileReader(); 

    freader.onload = function (e) { 
     console.log(e.target.result); 
     playSound(e.target.result); 
    }; 
    freader.readAsArrayBuffer(file); 
} 
document.getElementById('files').addEventListener('change', handleFileSelect, false); 

jsfiddle : http://jsfiddle.net/SpacePineapple/8xZUD/2/

http://ericbidelman.tumblr.com/post/13471195250/web-audio-api-how-to-playing-audio-based-on-user