2017-12-05 3 views
0

저는 앱 개발에있어 초보자입니다. 안드로이드 및 iOS 용 간단한 오디오 플레이어 응용 프로그램을 만들고 phonegap 빌드로 제작했습니다.오프라인 사용을위한 파일 다운로드 Cordova/PhoneGap 빌드

이 응용 프로그램은과 같이 원격 서버에있는 MP3 파일을로드 할 <audio> HTML 태그를 사용 분명히

  <div class="mobileui-music-cover-controls"> 
    <audio ontimeupdate="udpateProgress()" id="player"> 
     <source src="http://www.myserver.com/audiofile.mp3" type="audio/mpeg">   
    </audio> 
      <a id="playKnop" href="JavaScript:playMusic()" class="play"><i class="ion-ios-play"></i></a> 
      <a id="pauseKnop" href="JavaScript:pauseMusic()" class="play"><i class="ion-ios-pause"></i></a> 
     </div> 

을,이 예를 들어 scr을 변경했습니다.

안정적인 인터넷 연결을 사용하고 있지만 일부 사람들이 연결이 끊기는 등의 문제가 발생하는 경우 정상적으로 작동합니다. 사용자 요청에 따라 파일을 오프라인으로 사용할 수있게하려고합니다. 그래서 그것은 선택 사항이어야합니다 (버튼을 클릭하거나 그런 식으로). 앱은 파일이 기기에 존재하는지 여부를 감지하고, 그렇다면 원격 파일을 통해 로컬 파일을 선택해야합니다.

간단히 말해서, 나는 2 개의 질문이 있습니다.

  1. 사용자 요청에 따라 특정 파일을 다운로드하려면 어떻게해야합니까?
  2. 파일의 존재 여부를 확인하고 올바른 파일을 재생하려면 어떻게해야합니까?

나는 이것을하는 방법을 생각할 수 없다. 나는 지난 며칠 동안 노력하고있다. 그러나 나는 이것을 달성하는 방법에 대한 단서가 없다. 어떤 도움이라도 대단히 감사하겠습니다.

답변

0

당신의 말대로 장치에 파일을 다운로드해야합니다. 코드 바를 사용하고 있으니 fileTransfer을 사용하여 오디오를 다운로드 할 수 있습니다. 이것은 매우 직설적입니다 (이것은 공식 예제 코드입니다) :

// !! Assumes variable fileURL contains a valid URL to a path on the device, 
// for example, cdvfile://localhost/persistent/path/to/downloads/ 

var fileTransfer = new FileTransfer(); 
var uri = encodeURI("http://some.server.com/download.php"); 

fileTransfer.download(
    uri, 
    fileURL, 
    function(entry) { 
     console.log("download complete: " + entry.toURL()); 
    }, 
    function(error) { 
     console.log("download error source " + error.source); 
     console.log("download error target " + error.target); 
     console.log("download error code" + error.code); 
    }, 
    false, 
    { 
     headers: { 
      "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA==" 
     } 
    } 
); 

다음에 오디오를 재생하려면 로컬 버전이 있는지 확인해야합니다. 파일이 존재하는지 (많은 방법이 있습니다, 예 : Cordova check if file in url exists) 장치를 확인하거나 기본적으로 간단한 lil 데이터베이스 인 localStorage과 같은 것을 사용하십시오.

// more or less pseudo code!!! 

// callback from fileTransfer when your file was downloaded 
function downloadSuccess(entry) { 
    // save it to localStorage 
    // key: the remote URL, value: the local URL 
    localStorage.setItem(remoteURL, entry.toURL()); 
} 

... 
... 

// the check if there is a cached file 
var remoteSrc = "http://www.myserver.com/audiofile.mp3"; 
var localSrc = localStorage.getItem(remoteSrc); 

if(localSrc === null) { 
    // when there is NO cached version, use remote 
    audioElement.src = remoteSrc; 
} else { 
    // when there IS a cached version, use local 
    audioElement.src = localSrc; 
} 

나는이 도움이 방법 :

자신을 캐싱 간단한 달성하는 당신에게 아이디어를 제공 희망
관련 문제