Play audio on Ionic

user_12320028 0
Viewed 441

I´m workin with Ionic 6 and Angular (Capacitor)

I want to play an audio from the next site (http://138.91.126.10:1011/PLAZA%20MAY%20AUDIOGUIA.wav) but it don't work, on my browser it works very well but on a mobile device it don't work.

Wen I change the source (http://138.91.126.10:1011/PLAZA%20MAY%20AUDIOGUIA.wav) to (../../assets/media/Audio1.mp3) it both works

what can I do to play the audio from (http://138.91.126.10:1011/PLAZA%20MAY%20AUDIOGUIA.wav) on my movil device?

This is my code: <audio controls> <source src="http://138.91.126.10:1011/PLAZA%20MAY%20AUDIOGUIA.wav" type="audio/wav" /> </audio>

I did try use howlerJS but i get the same problem, it work whit (../../assets/media/Audio1.mp3) but no work with (http://138.91.126.10:1011/PLAZA%20MAY%20AUDIOGUIA.wav)

ionic-framework angular audio
2 Answers

you should look at Ionic Native's documentation: https://ionicframework.com/docs/native/native-audio

$ npm install cordova-plugin-nativeaudio
$ npm install @awesome-cordova-plugins/native-audio
$ ionic cap sync

then

import { NativeAudio } from '@awesome-cordova-plugins/native-audio/ngx';

constructor(private nativeAudio: NativeAudio) { }

...

this.nativeAudio.preloadSimple('uniqueId1', 'path/to/file.mp3').then(onSuccess, onError);
this.nativeAudio.preloadComplex('uniqueId2', 'path/to/file2.mp3', 1, 1, 0).then(onSuccess, onError);

this.nativeAudio.play('uniqueId1').then(onSuccess, onError);

// can optionally pass a callback to be called when the file is done playing
this.nativeAudio.play('uniqueId1', () => console.log('uniqueId1 is done playing'));

this.nativeAudio.loop('uniqueId2').then(onSuccess, onError);

this.nativeAudio.setVolumeForComplexAsset('uniqueId2', 0.6).then(onSuccess,onError);

this.nativeAudio.stop('uniqueId1').then(onSuccess,onError);

this.nativeAudio.unload('uniqueId1').then(onSuccess,onError);

To go further Ionic Native also offers music controls https://ionicframework.com/docs/native/music-controls

user_119751910

I solved the problem by adding the line android:usesCleartextTraffic="true" and <uses-permission android:name="android.permission.INTERNET" /> in the document android/app/src/main/AndroidManifest.xml

picture 1 usesCleartextTraffic

picture 2 permission.INTERNET

user_123200280
Related