微信小程序——实现音乐播放器（上下切换歌曲、进度条拉动、暂停与继续播放）

小伙伴们你们有没有想过自己搞一个播放器，播上自己喜欢的歌单，那是多么的惬意啊~
之前，小编遇到一个项目，语音导览的播放器。其实跟播放歌单一个道理。
但是一看微信开发文档里面的音频API又是那么多，我们该如何选择呢？在这里小编选择了使用wx.createAudioContext();这个API。
当然啊这个需要注意的是：从基础库 1.6.0 开始，这个接口就停止维护，推荐使用 wx.createInnerAudioContext 代替；并且需要小程序基础库版本不低于 1.9.6。

wx.createAudioContext()

那么这个接口该如何正确使用呢？
AudioContext 实例，可通过 wx.createAudioContext 获取。
AudioContext 通过 id 跟一个 audio 组件绑定，操作对应的 audio 组件。

效果图

可以看到该播放器有切换上下曲按钮、暂停按钮以及进度条
小编是这样实现的

wxml布局

<!-- 播放器样式 -->

<audio id="myAudio" class="audio_a" src="{
    {audio}}"  bindtimeupdate='bindtimeupdate'></audio>
<view class="audioV" wx:if="{
    {audio!=''}}">
  <view class="audioV_L_R">
    <!-- 左边的图片 -->
    <view class="audioV_left">
      <view class="audioV_left_v">
        <image class="audioV_left_img" src="{
    {detail.audio_cover}}"></image>
        <image class="audioV_left_play" src="/images/play1.png" wx:if="{
    {isplay==false}}" bindtap="clickplay"></image>
        <image class="audioV_left_play" src="/images/puse1.png" wx:if="{
    {isplay==true}}" bindtap="stop"></image>
      </view>
    </view>
    <!-- 右边的控制 -->
    <view class="audioV_right">
      <view class="audioV_right_top">
        <view class="audioV_right_top_name">{
  {CN==true?detail.name:detail.name_e}}</view>
        <view class="audioV_right_top_contro">
          <image class="audioV_right_top_last" src="../../../images/last.png" bindtap="getLast"></image>
          <image class="audioV_right_top_play" wx:if="{
    {isplay==false}}" bindtap="clickplay" src="../../../images/play2.png"></image>