快应用之audio

做为一枚小白，之前快应用项目接触需要用到audio音频效果，但是快应用不支持h5的新标签< audio >。虽然有提供了音频接口，但是小白还是觉得无从下手，在网上搜了下也没有很好的参照，没有下手的方向，磕磕碰碰写出效果来，效果简单。不足之处请指教。
页面效果图：

1、首先接口声明，在manifest.json的"features"里写上 { “name”: “system.audio” } 声明接口，后在页面上导入模块
import audio from ‘@system.audio’ 或 const audio = require(’@system.audio’)

2、这边是< template >部分

：下面是播放音频：

用自定义data组件来做为判断条件来选择播放音频，其中踩过的坑，注意$idx：

(1) for="{{list}}"：list为源数据数组，默认的数组元素名为$item;

(2) for="{{value in list}}"：value为自定义的数组元素名，默认的数组元素索引名为 $idx ;
(3)for="{{(index, value) in list}}"：index为自定义的数组元素索引名，value为自定义的数组元素名

3、然后是< script>部分

protected: {
  idx:'',//定义，这边是传参过来的，要放在protected里
  start: true
},
private: {//MP3太大了，外链进来
  audioSrc:[
    {src:'https://vp.bizhijingling.com/uploadfile/musics/snippet/one.mp3'},
    {src:'https://vp.bizhijingling.com/uploadfile/musics/snippet/two.mp3'},
    {src:'https://vp.bizhijingling.com/uploadfile/musics/snippet/three.mp3'},
    {src:'https://vp.bizhijingling.com/uploadfile/musics/snippet/four.mp3'},
    {src:'https://vp.bizhijingling.com/uploadfile/musics/snippet/five.mp3'},
    {src:'https://vp.bizhijingling.com/uploadfile/musics/snippet/six.mp3'},
  ],
  rotate: '',//这边是播放状态的动画效果
},
setAudioSrc() {
    if(this.idx <= 5){//idx == 6没有播放音频操作
      audio.src=this.audioSrc[this.idx].src
    }
},
audioPlay() {
    audio.play()//开始播放音频
    audio.loop=true//循环播放
    this.start=false
    this.rotate = 'rotate'//添加播放动画效果
},
audioPause() {
    audio.pause()//暂停音乐播放
    this.start=true
},
onDestroy () {
    audio.stop()//退出页面停止音频播放
},

4、最后是< style>部分