How to play mp3 file in ionic2 project

Ionic Framework ionic-v3
1

Hi,

I’m trying to play simple .mp3 file on tap of the button but can’t figure out why it isn’t working with ionic2.

I place my media file under ionic2root/www/media/alarm.mp3

Imports

 import {Component,NgZone,Injectable} from '@angular/core';
 import {NavController, Alert, NavParams, Platform} from 'ionic-angular';
 import {StatusBar,MediaPlugin,BackgroundMode} from 'ionic-native';

 export class UserPage {
     static get parameters() {
         return [[AuthService],[NavController],[NgZone]];
     }

    constructor(authservice, navcontroller, ngzone, platform) {
        this.service = authservice;
        this.nav = navcontroller;
        this.distance = 0;
        this.time = new Date();
        this.ngzone=ngzone;
        this.platform = platform;
        this.theft = 0;
        this.myModel = false;
        //setInterval(() => this.time = new Date(), 1000);
    }

    playFile(){
        var file = new Media("media/alarm.mp3",// success callback
        function () {
            alert("success");
        },
        // error callback
        function (e) {
           alert("Error getting amp=" + e.code);
        });
        file.play();
     }
}

Questions

  1. i tried using ionic-native but no luck?
  2. Is my file path is right?
  3. Wan’t fill confident with ionic-native!

Ionic native gives following error

npm install ionic-native --save

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.12
npm WARN ionic2-ble-demo@ No repository field.
npm WARN ionic2-ble-demo@ No license field.

Please advise.

1 Like
2

have you got solution for it?

3

Same here. I never thought it could so difficult to simply play an audio…

1 Like
4

Playing media is very simple. The easiest way is to use the media plugin. You need to add the media plugin to your project, then add ionic-native to your project. You can then view the docs for simple examples of how to load and play a media file with ionic-native in the ionic2 docs section of the ionic website.

There are also examples on how to use the media plugin directly without ionic native on the github page for the cordova media plugin.

5

its working in ios simulator, but couldnt get it working in web, android. its failing to locate the file in the given path while creating media plugin.
var audioFile = new MediaPlugin(this.getCordovaPath(filePath));
getCordovaPath(mediaPath){
if(this.platform.is(‘android’)){
return “file://”+mediaPath;//“file://”+
}
return mediaPath;
}

above code not working in android emulator. any idea?

6

It won’t work in web as cordova plugins will only work on real devices or simulators. This is expected behaviour.

Android and iOS have different paths to access files, I suggest reading up on the cordova file plugin (which the media plugin utilizes) to work out how to locate files and pass them to the media plugin efficiently.

7

try this link. Hope so this will solve your purpose.