Перечислите локальный mp3-файл в моем приложении, используя ionic 3 и angular 5

Question

Я пытаюсь перечислить мои локальные mp3-файлы в моем приложении, но я не знаю, как это сделать.Я могу получить доступ к своим файлам с помощью плагина fileChooser, но мне нужно что-то вроде Wynk MusicApp, мне нужно указать свой локальный mp3-файл в самом приложении.Может ли кто-нибудь помочь мне добиться этого ??

Ниже описано, как я это сделал, используя плагин fileChooser ionic3

Home.html

<ion-content>
 <button ion-button (click) ="chooseFile()">Click</button>
</ion-content>

Home.ts

chooseFile() {

 this.fileChooser.open()
  .then(uri => {
    (<any>window).FilePath.resolveNativePath(uri, (result) => {
      this.nativepath = result;
      this.audioplay();
    }, (err) => {
      alert(err);
    })
  })
  .catch(e => console.log(e));
}

audioplay() {

var localURL = this.nativepath.substring(8);
const audioFile: MediaObject = this.media.create(localURL);
audioFile.play();

}

Answer 1

Вот как я это сделал. Я публикую это, чтобы кому-то было полезно.

Home.html

<ion-content>
  <ion-list>
    <ion-item *ngFor="let mp3 of _fileList" (click)="audioplay(mp3)">
      <ion-label>{{mp3.name}}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Home.ts

export class HomePage {
 audioFile: any;
 _fileList;

constructor(public navCtrl: NavController,
private fileChooser: FileChooser,
private media: Media,
private musicControls: MusicControls,
public file: File,
public platform: Platform) { }

  ionViewDidLoad() {
   this.gridFlag = this.gridListFlag;
   this._fileList = [];
   this.getMp3();
  }

 getMp3() {
  this.platform.ready().then(() => {
  this.file.listDir(this.file.externalRootDirectory, '').then((result) => {
    for (let item of result) {
      if (item.isDirectory == true && item.name != '.' && item.name != '..') 
  {
        this.getFileList(item.name);
      }
      else if (item.isFile == true) {
        this.saveFileToArray(item);
      }
    }
  },
    (error) => {
      console.log(error);
    });
  })
 }

 saveFileToArray(item) {
  let extn = item.fullPath.split(".").pop();
   if (extn == 'mp3' || extn == 'm4a') {
    console.log("mp3 found");
    this._fileList.push({
    name: item.name,
    path: item.fullPath
  })
  }
 }

 public getFileList(path: string): any {
  let file = new File();
   this.file.listDir(file.externalRootDirectory, path)
   .then((result) => {
    for (let item of result) {
      if (item.isDirectory == true && item.name != '.' && item.name != '..') 
     {
        this.getFileList(path + '/' + item.name);
      }
      else {
        this.saveFileToArray(item);
      }
    }
  }, (error) => {
    console.log(error);
  })
}

 audioplay(item) {
  console.log("PlayingItem", item);
  const audioFile: MediaObject = this.media.create(item.path);
  audioFile.play();

Answer 2

Да, вы можете просто достичь этого

Home.ts

audioarray:any;

ionViewDidLoad() {
  this.audioarray = [];
}

chooseFile() {

this.fileChooser.open()
.then(uri => {
  (<any>window).FilePath.resolveNativePath(uri, (result) => {
    this.nativepath = result;
    // Push the files into the array...
    this.audioarray.push(this.nativepath);
    this.audioplay();
}, (err) => {
  alert(err);
})
})
.catch(e => console.log(e));
}

Home.html

<ion-content>
  <button ion-button (click) ="chooseFile()">Click</button>
  <div *ngFor = "let aud of audioarray">
    <audio [src]="aud" *ngIf="aud" controls></audio>
  </div>
</ion-content>

Нет необходимости использовать какой-либо плагин только в дальнейшемВы можете использовать HTML.