在Ionic上播放音频

Question

我正在使用Ionic 6和Angular(电容器(

我想播放下一个网站的音频(http://138.91.126.10:1011/PLAZA%20MAY%20AUDIOGUIA.wav)但它不起作用，在我的浏览器上运行得很好，但在移动设备上不起作用。

温我换来源(http://138.91.126.10:1011/PLAZA%20MAY%20AUDIOGUIA.wav)到(../../assets/media/Audio1.mp3(，它都可以使用

我能做些什么来播放(http://138.91.126.10:1011/PLAZA%20MAY%20AUDIOGUIA.wav)在我的移动设备上？

这是我的代码：<audio controls> <source src="http://138.91.126.10:1011/PLAZA%20MAY%20AUDIOGUIA.wav" type="audio/wav" /> </audio>

我确实尝试过使用howlerJS，但我遇到了同样的问题，它可以使用(../../assets/media/Audio1.mp3(，但不能使用(http://138.91.126.10:1011/PLAZA%20MAY%20AUDIOGUIA.wav)

Answer 1

您应该查看Ionic Native的文档：https://ionicframework.com/docs/native/native-audio

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

然后

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);

更进一步，Ionic Native还提供音乐控制https://ionicframework.com/docs/native/music-controls

Answer 2

我通过在文档中添加行android:usesCleartextTraffic="true"和<uses-permission android:name="android.permission.INTERNET" />解决了这个问题android/app/src/main/AndroidManifest.xml

图片1使用cleartexttraffic

图片2准许互联网