如何將file.mp3上傳到Firebase存儲中的離子？

Question

我在離子應用程序中創建了一個錄音功能。我使用媒體插件：

$ ionic cordova plugin add cordova-plugin-media 
$ npm install --save @ionic-native/media 

我可以錄製音頻，併成功地發揮它是這樣的：

constructor(private media: Media,private base64: Base64) { 

this.file = this.media.create('file.mp3'); 

} 

record_audio(){ 

this.file.startRecord(); 
} 

到uplaod到火力點，我不能直接上傳file.mp3，貌似我需要將它轉換爲BLOB或Base64第一所以我想這樣做，但它說：「媒體目標不能分配給字符串」：

let filePath: string = 'this.file.mp3'; 
this.base64.encodeFile(filePath).then((base64File: string) => { 
console.log(base64File); 
}, (err) => { 
console.log(err); 
}); 

目的是上傳錄製的音頻文件到火力地堡。要做到這一點，我需要將這個file.mp3轉換爲base64。

Answer 1

 startRecording() { 
    console.log("Started Recording"); 
    this.recording = true; 
    this.file.createFile(this.file.tempDirectory, 'my_file.m4a', true).then(() => { 
     const audio: MediaObject = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a'); 
     console.log("Audio assigned to constant audio media object"); 
     console.log(audio); 
     this.audio = audio; 
     console.log("Audio assigned to this.audio media object"); 
     console.log(this.audio); 
     this.audio.startRecord(); 
     this.listenToAudioEvents(); 
     window.setTimeout(() => { 
     if (this.recording) this.stopRecording(); 
     }, 10000); 
    }); 
    } 

    listenToAudioEvents() { 
    this.audio.onStatusUpdate.subscribe(status => { 
     console.log("Status of this.audio updated"); 
     console.log(status); 
     if (status == 4 && this.playingAudio) { 
     console.log("Time to stop playback") 
     this.stopPlayback(); 
     } 
    }); 
    } 

    stopRecording() { 
    this.audio.stopRecord(); 
    console.log("Stopped Recording"); 
    console.log(this.audio); 
    this.recording = false; 
    this.audioReady = true; 
    this.audio.getDuration(); 
    console.log("Audio Duration: " + this.duration); 
    console.log("Audio Duration Property: " + this.audio.duration); 
    } 

    playAudio() { 
    console.log("Playing Audio"); 
    this.playingAudio = true; 
    this.audio.play(); 
    } 

    stopPlayback() { 
    console.log("Stopping Playback"); 
    this.playingAudio = false; 
    this.audio.stop(); 
    } 

    uploadAudio() { 
    console.log("Uploading record"); 
    this.storeRecord().subscribe((downloadURL) => { 
     console.log("Finished storing record"); 
     console.log("Download URL is " + downloadURL); 
     this.audioURL = downloadURL; 
     this.audioURLReady = true; 
    }); 
    } 

    storeRecord() { 
    return Observable.create((observer) => { 
     console.log('Saving record'); 
     const filePath = `${this.file.tempDirectory}my_file.m4a`; 
     console.log("Path to record is " + filePath); 
     const readFile: any = window['resolveLocalFileSystemURL']; 
     return readFile(filePath, (fileEntry) => { 
     return fileEntry.file((file) => { 
      const fileReader = new FileReader(); 
      fileReader.onloadend = (result: any) => { 
      let arrayBuffer = result.target.result; 
      let blob = new Blob([new Uint8Array(arrayBuffer)], { type: 'audio/m4a' }); 
      console.log("Blob is "); 
      console.log(blob); 
      var storageRef = firebase.storage().ref('content/' + this.firebase.user.uid + '/my-file.m4a'); 
      console.log("Storage reference is " + storageRef); 
      var uploadTask = storageRef.put(blob); 
      console.log('Upload started:'); 
      uploadTask.on('state_changed', (snapshot) => { 
       console.log("state changed"); 
       let percent = uploadTask.snapshot.bytesTransferred/uploadTask.snapshot.totalBytes * 100; 
       console.log(percent + "% done"); 
      }, (e) => { 
       console.error(e); 
       observer.error(e); 
      },() => { 
       var downloadURL = uploadTask.snapshot.downloadURL; 
       console.log('Storage Download URL:' + downloadURL); 
       observer.next(downloadURL); 
      }); 
      }; 
      fileReader.onerror = (e: any) => { 
      console.error(e); 
      observer.error(e); 
      }; 
      fileReader.readAsArrayBuffer(file); 
     }, (e) => { 
      console.error(e); 
      observer.error(e); 
     }); 
     }, (e) => { 
     console.error(e); 
     observer.error(e); 
     }); 
    }); 
    } 

    downloadAudio() { 
    console.log("Downloading Audio") 
    const fileTransfer: FileTransferObject = this.fileTransfer.create(); 
    var destPath = (cordova.file.externalDataDirectory || cordova.file.dataDirectory) + "my_file.m4a" 
    fileTransfer.download(this.audioURL, destPath,).then((entry) => { 
     let rawAudioURI = entry.toURL(); 
     this.audioURI = rawAudioURI.replace(/^file:\/\//, '/private'); 
     this.audioURIReady = true; 
     console.log("Audio URI: " + this.audioURI); 
    }, (error) => { 
     console.error(error); 
    }); 
    } 

    playAudioURI() { 
    console.log("Playing AudioURI"); 
    let downloadedAudio: MediaObject = this.media.create(this.audioURI); 
    console.log("Downloaded audio: " + downloadedAudio); 
    downloadedAudio.play(); 
    } 
}