Scanning media files with ionic using the file cordova plugin

Question

I'm building a music player application using Ionic, so how can I scan music files from the file storage using the file cordova plugin so users can be able to select songs to play .P.S I'm pretty new to Ionic.

score 2 · Answer 1 · answered Aug 19 '16 at 06:55

You'll need to both access the music files and play them. There are some Cordova plugins that should help in accessing the native stuff. After adding one or multiple plugins to your project, I have found that they have pretty useful documentation and examples in the github repos. There is a link to these in the npm page.

For accessing files there is

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

Based on the device type you are targeting, and where you expect users to access media files you might need to use one or all of these.

For playing files:

cordova-plugin-media: https://www.npmjs.com/package/cordova-plugin-media
cordova-plugin-streaming-media ( if you are using an API that streams audio ): https://www.npmjs.com/package/cordova-plugin-streaming-media
you might also be able to use HTML5 media: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

Do you know of a plugin which allows media files to be served in a local network, securely? I want to access music files in the computer. — arjun, Oct 24 '17 at 06:27

score 0 · Answer 2 · answered Nov 14 '17 at 11:32

This code will list all folders and files:

    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();
  }

Scanning media files with ionic using the file cordova plugin

2 Answers2