What is the best way to play audio at the moment?

Ionic Framework Ionic Angular
1

Hi, I am writing a Ionic 5 + Angular app and using capacitor to build for android (and next to ios). I have to play some audio files (all stored in /src/assets folder) in certain moments. I tough it would be easy but after 3 days trying I am only more confused than before :sweat_smile:. If I am correct, there are 3 main ways to play an audio:

  1. HTML 5
let audio = new Audio('../../assets/audio/countdown/0.mp3');
audio.load();
audio.play();

  1. Native audio plugin with the latest update on 17 Apr 2017

  2. Media plugin that it’s active

I started with native audio but I had no luck (if I remember correctly I wasn’t able to provide a valid path) and since I saw that it wasn’t developed anymore I tried to go on media plugin. With media plugin, I made a simple button to test the play action, so I wrote in the component:

import { Media } from '@ionic-native/media/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  constructor(private media: Media) { }

  start() {
    let zero = this.media.create(`cdvfile://localhost/assets/audio/countdown/0.mp3`);
    zero.setVolume(1);
    zero.play();
  }
}

It doesn’t work. From Android Studio running logs I have

V/Capacitor/Plugin: To native (Cordova plugin): callbackId: INVALID, service: Media, action: create, actionArgs: ["98bc104d-bb37-3285-8a58-b87444470383","cdvfile:\/\/localhost\/assets\/audio\/countdown\/0.mp3"]
V/Capacitor/Plugin: To native (Cordova plugin): callbackId: INVALID, service: Media, action: setVolume, actionArgs: ["98bc104d-bb37-3285-8a58-b87444470383",1]
V/Capacitor/Plugin: To native (Cordova plugin): callbackId: INVALID, service: Media, action: startPlayingAudio, actionArgs: ["98bc104d-bb37-3285-8a58-b87444470383","cdvfile:\/\/localhost\/assets\/audio\/countdown\/0.mp3",null]
W/AudioManager: Use of stream types is deprecated for operations other than volume control
    See the documentation of requestAudioFocus() for what to use instead with android.media.AudioAttributes to qualify your playback use case

Thinking it was the path that was wrong I tried several times without success (cdvfile://, file:// or directly the path). Can anyone help me? Maybe I am missing something to import or to set, or maybe there’s a better way to do it, I don’t know at this point, I am fairly new to Ionic.

I had no problem with HTML 5 way but I read in this forum that it doesn’t work with background play so I wanted to implement with the cordova plugin.

Thank you.

2

Was getting that error and Its likely
zero.setVolume(1); and zero.play(); are being called before the media had been fully created. Try calling them in a different function after the media.create has already been fully completed.

3

Except that I have the same error in create function.
Anyway, I put the create in the constructor (creating zero as a class attribute) and as expected I got the three errors and no audio

4

Try something like this, hope it works

export class HomePage implements OnInit {
zero: MediaObject;
  constructor(private media: Media) { }

ngOnInit() {
    this.prepare();
  }

prepare(){
this.zero = this.media.create(`/android_asset/public/assets/audio/countdown/0.mp3`);
}

  start() {
    this.zero.setVolume(1);
    this.zero.play();
  }
}
5

Still the same, no sound and the errors from before

6

If you have a git repo I could try and help you debug

7

In the end the problem with media plugin was the path that wasn’t correct as I supposed in the first post. With the file plugin I found the correct one trying and trying in cdvfile://localhost/assets/public/assets/audio for android, having in the project folder /src/assets/audio.
It’s a little misleading that the plugin doesn’t inform that the path isn’t valid or doesn’t raise any error when playing the track since the 3 messages are still there with an invalid callbackId even if everything works correctly.

8

I had the same problem as you.
I am using capacitor 3, ionic 5, vue 3 in my project.
I fork a repository in which I removed www from the asset path and now everything works correctly on android and ios