브라우저에서 HTML5 파일 API를 사용하여 오디오 리스터 만들기

HTML5로 뮤직 플레이어를 만들지 않았습니다. 데스크톱에서 드래그 앤 드롭 파일을 이미 만들었습니다. 지금은 노래 이름으로 정렬되지 않은 목록을 만들고 있지만 노래를 캡처하는 방법을 모릅니다. 사용자가 그것을 누르면 재생됩니다. 그것은 잘 작동브라우저에서 HTML5 파일 API를 사용하여 오디오 리스터 만들기

var dropbox = document.getElementById("dropbox") 
dropbox.addEventListener("drop", function (evt) { 
      evt.preventDefault(); 
      evt.stopPropagation(); 

      var files = evt.dataTransfer.files; 
      for (var i = 0, f; f = files[i]; i++) { 
       var li = document.createElement('li'); 
       li.innerHTML = "<li>" + escape(f.name) + "</li>"; 
       document.getElementById('songs').appendChild(li); 
      } 

      console.log("Dropped File"); 
     }, false);

, 바로 다음 단계를 취할 도움이 필요 :

이 내가 지금까지있는 것입니다. 파일을 재생하기 전에 서버에 업로드해야한다고 생각하지만 공간을 차지하지 않는 해결책이 있지만 브라우저 창이 열렸을 때 파일을 열면 좋습니다!

제안 사항?

출처

2012-04-29 Lasse

여기 있습니다. 필자는 최신 크롬에서만 테스트했지만 IE9, FF3.6 + 및 Safari에서는 작동합니다.

이 HTML5 파일 리더 및 오디오 플레이어를 사용하고, 모든 1 HTML 파일

기본 사항은 https://developer.mozilla.org/en/DOM/FileReader에서하고 http://www.w3.org/2010/05/video/mediaevents.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <title>Audio Player Test</title> 
     <script type="text/javascript"> 
      function SelectAudio(files) { 
       var file = files[0]; 
       if (file.type.match(/audio.*/)) { 
        var reader = new FileReader(); 
        reader.onload = function(d) { 
         var e = document.createElement("audio"); 
         e.src = d.target.result; 
         e.setAttribute("type", file.type); 
         e.setAttribute("controls", "controls"); 
         e.setAttribute("autoplay", "true"); 
         document.getElementById("container").appendChild(e); 
        }; 
        reader.readAsDataURL(file); 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <input type="file" onchange="SelectAudio(this.files)" /> 
     <div id="container"></div> 
    </body> 
</html>

EDIT로 수행됩니다 HTML 파일로 저장하면, 로컬 또는 원격 웹 서버를 통해 액세스해야합니다. html 파일을 직접 열 때 HTML5 파일 판독기가 작동하지 않는 것 같습니다.

나는 http://jsfiddle.net/KY8Kg/

출처

2012-04-29 20:43:26

덕분에 사본을 게시! 그러나 나는 그것을 "저장"하기를 원하기 때문에 재생 목록의 다른 노래가 끝나면 재생할 수 있습니까? 나중에 재생할 수 있도록 많은 노래를 저장할 수 있어야합니다. 재생 목록에 앨범을 놓을 수있게하면 모든 노래가 재생됩니다. Windows Media Player를 사용하는 것과 같습니다. 이것이 가능한가? – Lasse

같은 코드로 가능합니다. 새로운 http://jsfiddle.net/KY8Kg/6/을 방문하십시오. 이번에는 찾아보기 대화 상자에서 여러 파일을 선택하거나, 두 개 이상의 파일을 선택하거나, 상자를 두 번 이상 열 수 있습니다 여러 개의 파일을 선택하면 파일을 대기열에 넣습니다. –

드래그 앤 드롭은 찾아보기 대화 상자와 동일하므로 여러 번 D & D를 사용하여 목록에 계속 추가 할 수 있습니다. –

브라우저에서 HTML5 파일 API를 사용하여 오디오 리스터 만들기

답변

관련 문제