Issue with playing audio file in my ionic 4 app?

Hello everybody. This is my first time to use the forum/ask a question here, and I hope anyone can help me with this problem. Currently I’m using Ionic 4 with Angular.

I want to have an image when I click it, audio will be played(mp3/wav). I’ve been struggling on it for a week now. Can you help me with the following? What are my options to play audio file in ionic 4, and how to play my audio file in the app?

Does this post help?

If this does not help, I’ll try to see if I can make up a small sample app that does what you want.

Question: where is your mp3 file being stored?

Question: where is your mp3 file being stored?

I’m storing it in the same directory as the html file.
in Chrome Debug Console, it shows this error when I click on the href link that I made of the mp3 file.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘My_Audio_File.mp3’

Here is the html file…

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home Page
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <audio
        controls
        src="My_Audio_File.mp3">
            Your browser does not support the audio element.
    </audio>
<p>

    <a href="My_Audio_File.mp3">Debugging: link to the audio</a>
<p>
</ion-content>

What has worked for me is to put the audio file into the assets/ folder. The assets folder is “compiled up” with your program and installed with it on the device. So, e.g., try this:

<ion-content>  
     <audio controls src="assets/My_Audio_File.mp3">
     </audio>
</ion-content>

And put your My_Audio_file.mp3 file in the assets directory of your project.

1 Like

Also, I’m not sure right now how to play the mp3 file when you click on a picture. I’m sure the <a href...> business won’t work. I’ll have to look into it tomorrow. Time for bed for me now… :slight_smile:

Here is a solution:

home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Test playing audio when clicking an image
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-img style="width: 100px" src="assets/icon/favicon.png" (click)="imageClicked()">
    <audio #audioPlayer>
      <source src="assets/1.mp3">
    </audio>
  </ion-img>

</ion-content>

home.page.ts:

import { Component, ViewChild } from '@angular/core';

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

  @ViewChild('audioPlayer') audio: any;

  constructor(
  ) { }

  imageClicked() {
    this.audio.nativeElement.play();
  }

}

To make this work, you have to have a file called 1.mp3 in the assets/ folder.

Keeping in mind that I’ve editted the html file as you told me to try out, I’ve found two solutions:-

  1. I’ve tried adding the mp3 file into the assets folder as you said, and it worked.
  2. After that, I wanted to see what would happen if I removed the audio file from the assets folder and kept it in the same directory as the html file. Keep in mind that I’ve changed the code in the html file to read from “assets/My_Audio_File.mp3”. That was unexpectedly compiling correctly too.

Thank you so much for your help, I appreciate it. I was stuck on this issue for two weeks, and now it’s solved thanks to you :slight_smile:

I still want to know why I have to reference the audio file from the assets folder though.

I will try this edit out tonight, and I will let you know if it works out for me or not.