cordova typescript Media plugin MediaPlayer

Question

In Visual Studio Community 2017, I started with the "Ionic 2 - Sidemenu" template. (Ionic2, Angular2, TypeScript) I want to use the Media cordova plugin, and play an (audio) mp3 file. Case: the app opens > the audio controls are displayed > the actor taps the play button > the audio file plays.

In VS, I used the config.xml > Plugins UI to install the plugin. Then in my app.component.ts file I have this at the top.

import { MediaPlugin } from 'ionic-native';

And this in the same file

initializeApp() {
  this.platform.ready().then(() => {
    console.log(MediaPlugin);
  });
}

Which spits out this in the console.

Question #1: do I have to do

var myPlayer = new Media(src, success, fail)

somewhere in a ts file? I'm thinking I have to use different code because I am using TypeScript.

Question #2: What do I put in the html to display the media player in the UI? I have this in the html now

<audio controls></audio>

But maybe I need something else because I am using ionic.

Currently I try to make the player play an mp3 file with this for a buttons click handler:

setSrc() {
    var myPlayer = document.getElementsByTagName('audio')[0];
    // the intellisense verifies that this path is correct
    myPlayer.src = '../../audio/Capitolo_7s.mp3'; 
}

I get an error in the Media player's UI:

This type of audio file isn't supported

Thanks.

how are you accessing your mp3 files using url ? or will the file will be inside the app? — The Blue Shirt Developer
The mp3 file will be on the local device. Strictly speaking, not really inside the app. — pdschuller
I need to know how to get the Media player working in this app, so that the controls display and the player is able to play, pause, and seek with a local mp3 file. — pdschuller
To start with: which version of ionic-native are you using? And further: Why do you start a new project with an old version of ionic? — David
@pdschuller what do you mean by not really inside the app means? — The Blue Shirt Developer

Mohammad Waleed Mohammad Waleed · Accepted Answer · 2017-10-18T06:55:00

Ionic have a wrapper for the cordova native plugin

check their documentation and usage in this link Ionic Native - Media

cordova typescript Media plugin MediaPlayer

1 Answers