uniapp音乐播放怎么写

1.uniapp音乐播放介绍

uniapp是基于vue开发的一个跨平台应用程序框架，可以帮助开发者快速地开发出一款跨平台的应用。在uniapp中，我们可以使用vue的开发方式，这样可以让我们更加快速地进行开发。uniapp中提供了很多api，我们可以轻松地实现一些常用的功能，比如音乐播放。

2.开始实现uniapp音乐播放

2.1 添加音乐资源

在uniapp中播放音乐，首先需要添加音乐资源。我们可以在项目中新建一个文件夹，将音乐文件存放在该文件夹下。例如，我们在项目根目录下新建一个名为"music"的文件夹，将音乐文件存放在该文件夹下。

// music文件夹结构
----music
    |----music1.mp3
    |----music2.mp3

2.2 引入uni-audio组件

在uniapp中，播放音乐我们可以使用uni-audio组件，该组件是uniapp提供的一个音频组件，可以实现音乐的播放、暂停、停止等功能。在使用uni-audio组件之前，我们首先需要在页面中引入该组件。

  // index.vue页面
  <template>
    <view>
      <uni-audio src="/music/music1.mp3">
    </view>
  </template>
  
  <script>
   export default {
     data() {
       return {
       };
     },
   };
  </script>

2.3 播放音乐

在成功引入uni-audio组件之后，我们就可以开始播放音乐了。要播放音乐，我们需要先获取到uni-audio组件的实例，然后调用play()方法即可。示例代码如下：

  // index.vue页面
  <template>
    <view>
      <uni-audio ref="audio" :src="/music/music1.mp3">
      <button @click="play">播放</button>
    </view>
  </template>
  
  <script>
   export default {
     data() {
       return {
       };
     },
     methods: {
        play() {
           const audioCtx = uni.createAudioContext("myAudio");
           audioCtx.play();
        }
     }
   };
  </script>

上述代码中，我们在<uni-audio>标签中添加了ref属性，并设置为"audio"，这样我们就可以在js代码中通过$this.refs.audio获取到该组件的实例了。在播放音乐时，我们通过调用uni.createAudioContext()方法获取到该组件的AudioContext实例，然后调用play()方法即可播放音乐。

2.4 暂停音乐

暂停音乐在uni-audio组件中也是非常简单的，我们只需要获取到该组件的AudioContext实例，然后调用pause()方法即可。示例代码如下：

  // index.vue页面
  <template>
    <view>
      <uni-audio ref="audio" :src="/music/music1.mp3">
      <button @click="play">播放</button>
      <button @click="pause">暂停</button>
    </view>
  </template>
  
  <script>
   export default {
     data() {
       return {
       };
     },
     methods: {
        play() {
           const audioCtx = uni.createAudioContext("myAudio");
           audioCtx.play();
        },
        pause() {
           const audioCtx = uni.createAudioContext("myAudio");
           audioCtx.pause();
        }
     }
   };
  </script>

2.5 停止音乐

停止音乐和暂停音乐类似，只需要获取到该组件的AudioContext实例，然后调用seek()方法，将currentTime设置为0即可。示例代码如下：

  // index.vue页面
  <template>
    <view>
      <uni-audio ref="audio" :src="/music/music1.mp3">
      <button @click="play">播放</button>
      <button @click="pause">暂停</button>
      <button @click="stop">停止</button>
    </view>
  </template>
  
  <script>
   export default {
     data() {
       return {
       };
     },
     methods: {
        play() {
           const audioCtx = uni.createAudioContext("myAudio");
           audioCtx.play();
        },
        pause() {
           const audioCtx = uni.createAudioContext("myAudio");
           audioCtx.pause();
        },
        stop() {
           const audioCtx = uni.createAudioContext("myAudio");
           audioCtx.seek(0);
        }
     }
   };
  </script>

2.6 点击切换音乐

在实际开发中，我们常常需要实现切换音乐的功能。这个功能在uniapp中也很简单，我们只需要在播放器中添加一个next按钮，在按钮的点击事件中，修改uni-audio组件的src属性即可。示例代码如下：

  // index.vue页面
  <template>
    <view>
      <uni-audio ref="audio" :src="/music/music1.mp3">
      <button @click="play">播放</button>
      <button @click="pause">暂停</button>
      <button @click="stop">停止</button>
      <button @click="next">下一首</button>
    </view>
  </template>
  
  <script>
   export default {
     data() {
       return {
         musicList: ["/music/music1.mp3", "/music/music2.mp3"],
         currentMusic: 0
       };
     },
     methods: {
        play() {
           const audioCtx = uni.createAudioContext("myAudio");
           audioCtx.play();
        },
        pause() {
           const audioCtx = uni.createAudioContext("myAudio");
           audioCtx.pause();
        },
        stop() {
           const audioCtx = uni.createAudioContext("myAudio");
           audioCtx.seek(0);
        },
        next() {
           if (this.currentMusic < this.musicList.length - 1) {
             this.currentMusic += 1;
           } else {
             this.currentMusic = 0;
           }
           const audioCtx = uni.createAudioContext("myAudio");
           audioCtx.setSrc(this.musicList[this.currentMusic]);
        }
     }
   };
  </script>

上述代码中，我们定义了一个musicList数组，保存了播放列表中的音乐文件路径。在下一首按钮的点击事件中，我们通过修改currentMusic变量，切换到下一首音乐，并修改uni-audio组件的src属性，实现音乐切换的功能。

3.总结

uniapp中的音乐播放功能可以通过使用uni-audio组件来实现。在开发过程中，只需要获取到该组件的AudioContext实例，就可以使用play、pause、seek等方法来播放、暂停、停止音乐了。同时，uniapp中切换音乐也非常容易，只需要修改组件的src属性即可。