Ionic 3 + Angular 5实现按钮点击播放Assets音频求助

没问题，我来帮你搞定这个播放音频的功能！你已经引入了NativeAudio插件，接下来只需要完善控制器代码，完成音频预加载和播放逻辑就行，具体步骤如下：

第一步：修正依赖注入与初始化逻辑 #

首先得在构造函数里注入NativeAudio和Platform（确保平台就绪后再加载音频，避免在未初始化的环境中出错），同时在页面生命周期钩子中预加载Assets里的音频文件：

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { NativeAudio } from '@ionic-native/native-audio';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // 自定义音频ID，方便后续调用
  private audioId: string = 'norrani-qaida-audio';
  // 替换成你Assets文件夹里的实际音频路径，比如assets/audio/lesson1.mp3
  private audioPath: string = 'assets/audio/your-audio-file.mp3';

  constructor(
    private platform: Platform,
    private nativeAudio: NativeAudio
  ) {
    // 等平台就绪后再预加载音频
    this.platform.ready().then(() => {
      this.preloadAudio();
    });
  }

  // 预加载音频的私有方法
  private preloadAudio(): void {
    this.nativeAudio.preloadSimple(this.audioId, this.audioPath)
      .then(() => console.log('音频预加载成功'))
      .catch(error => console.error('音频预加载失败:', error));
  }
}

第二步：实现playAudio()播放函数 #

接下来添加你需要的playAudio()方法，调用NativeAudio的播放API即可：

// 对应按钮点击的播放方法
public playAudio(): void {
  this.nativeAudio.play(this.audioId)
    .then(() => console.log('音频播放成功'))
    .catch(error => console.error('音频播放失败:', error));
}

额外注意事项 #

• 音频路径要准确：如果音频放在src/assets/audio/文件夹下，路径直接写assets/audio/xxx.mp3就行，不需要加src/，Ionic打包后会自动处理Assets路径。
• 如果需要循环播放，可替换成this.nativeAudio.loop(this.audioId)；要停止播放用this.nativeAudio.stop(this.audioId)。
• 测试尽量用真机或模拟器，因为NativeAudio是Cordova插件，纯Web浏览器环境可能无法正常工作。

你的HTML按钮代码已经没问题，ng-click="playAudio()"会正确触发这个播放函数。

内容的提问来源于stack exchange，提问作者Eye Softech