Question

我正在使用Ionic构建音乐播放器应用程序，因此如何使用文件cordova插件扫描文件存储中的音乐文件，以便用户可以选择要播放的歌曲.PS我对Ionic来说很新。

Answer 1

您需要同时访问音乐文件并播放它们。有一些Cordova插件应该有助于访问本机的东西。在您的项目中添加一个或多个插件后，我发现它们在github存储库中有非常有用的文档和示例。在npm页面中有这些链接。

访问文件有

cordova-plugin-file：https://www.npmjs.com/package/cordova-plugin-file
cordova-plugin-iospicker：https://www.npmjs.com/package/cordova-plugin-iosaudiopicker
cordova-plugin-mediapicker：https://github.com/an-rahulpandey/cordova-plugin-mediapicker

根据您定位的设备类型以及您希望用户访问媒体文件的位置，您可能需要使用其中一个或全部。

播放文件：

cordova-plugin-media：https://www.npmjs.com/package/cordova-plugin-media
cordova-plugin-streaming-media（如果您使用的是传输音频的API）：https://www.npmjs.com/package/cordova-plugin-streaming-media
您也可以使用HTML5媒体：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

Answer 2

此代码将列出所有文件夹和文件：

    import { File } from "@ionic-native/file";
    import { Diagnostic } from "@ionic-native/diagnostic";

    constructor(
        ...
        public file: File,
        public diagnostic: Diagnostic
        ){


  // -------------------------
  listFileSys( which){

    // <which> chooses the file system - see switch below
    this.jcDebug += "\n" + "listFileSysSKOFLO(" + which + ")";

    let fileSysArray = [];
    let basePath = "";

    let tag = "unknown";

    // ************** RECURSE *************
    let jcListDir = (thisDir)=>{

      tag = "jcListDir: [" + thisDir + "]";

      this.file.listDir(basePath, thisDir)
      .then( (data)=>{
        tag = "listDir:" + thisDir;
        this.jcError += "\n" + tag + ":" + JSON.stringify( data);
        for( let ii = 0; ii < data.length; ii += 1){
          this.jcError += "\n" + data[ii].name + (data[ii].isDirectory? " [D]" : " [F]");

          let currentPath = thisDir;
          currentPath += (currentPath.length ? "/" : "");
          currentPath += data[ii].name;
          this.jcError += "\n" + "currentPath:" + currentPath;

          fileSysArray.push( currentPath);

          if( data[ii].isDirectory && ok2recurse){
            jcListDir( currentPath);         // RECURSE !!!
          }
        }
      }, (errData)=>{
        tag = "listDir";
        this.jcError += "\n" + tag + ":ERR:" + JSON.stringify( errData);
      });
    };
    // ************** RECURSE *************

    // ***********************
    let runListDir = ()=>{
        this.jcDebug += "\n" + "basePath:" + basePath;

        // !!! START listing from basePath !!!
        jcListDir( ".");
    }

    // ***********************
    switch( which)
    {
      case 1:
        this.diagnostic.getExternalSdCardDetails()
        .then( (data) => {
          this.jcDebug += "\n" + "sd:" + JSON.stringify( data);
          this.jcDebug += "\n" + "Number of cards: " + data.length;
          for( let ii = 0; ii < data.length; ii += 1){
            let thisElem = data[ii];
            if( thisElem.type.toLowerCase() === "application" && thisElem.canWrite){
              basePath = thisElem.filePath;
              break;
            }
          }
          if( !basePath){
            this.jcDebug += "\n" + "no SD card found";
            return;
          }
          runListDir();
        }, (errData)=>{
          tag = "getExternalSdCardDetails";
          this.jcError += "\n" + tag + ":ERR:" + JSON.stringify( errData);
        });
      break;
      case 2:
        basePath = this.file.externalDataDirectory;
        this.jcError += "\n" + "externalDataDirectory:" + basePath;
        runListDir();
        break;
      case 3:
        basePath = this.file.dataDirectory;
        this.jcError += "\n" + "dataDirectory:";
        runListDir();
        break;
      default:
        alert( "which???:" + which);
        return;
    }

    // wait for all to comnplete, then show
    // assume 1000 ms is adequate delay per promise
    let lastFileSysLen = -1
    let checkCount = 30; // max 30 * 1000 ms = 30 seconds

    // ************** RECURSE *************
      let checkComplete = () => {
      this.jcDebug += "\n" + "checkComplete " + checkCount + " [" + fileSysArray.length + "]";
      setTimeout( ()=>{

        // fileSysArr length stable?
        if( fileSysArray.length === lastFileSysLen){
          checkCount = 0;
        }
        lastFileSysLen = fileSysArray.length;

        checkCount -= 1;
        if( checkCount > 0){
          checkComplete();    // recurse
        } else {

          // STOP !!! and show FileSysArray
          this.jcInfo += "\n" + "show FileSysArray";
          this.jcInfo += "\n" + "fileSysArray.length = " + " [" + fileSysArray.length + "]";

          fileSysArray.sort();

          for( let elem of fileSysArray){
            this.jcInfo += "\n" + elem;
          }
        }
      }, 1000);
    };
    // ************** RECURSE *************
    checkComplete();
  }

使用文件cordova插件扫描带有离子的媒体文件

2 个答案: