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 MAY AUDIOGUIA.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 MAY AUDIOGUIA.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 MAY AUDIOGUIA.wav) on my movil device?
This is my code:
<audio controls> <source src="http://138.91.126.10:1011/PLAZA MAY AUDIOGUIA.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 MAY AUDIOGUIA.wav)
CodePudding user response:
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, one rror);
this.nativeAudio.preloadComplex('uniqueId2', 'path/to/file2.mp3', 1, 1, 0).then(onSuccess, one rror);
this.nativeAudio.play('uniqueId1').then(onSuccess, one rror);
// 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, one rror);
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
CodePudding user response:
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