编写一个最新微信开发者小程序集播放列表和播放器一体的代码

以下是一个简单的微信开发者小程序，集播放列表和播放器一体：

<view class="container">
  <view class="playlist">
    <view class="playlist-header">播放列表</view>
    <scroll-view class="playlist-content" scroll-y="true">
      <view wx:for="{{playList}}" wx:key="index" class="playlist-item" bindtap="playMusic" data-index="{{index}}">
        {{item.name}}
      </view>
    </scroll-view>
  </view>
  <audio id="audio" binderror="audioError" bindtimeupdate="updateTime" bindended="playNext"></audio>
  <view class="player">
    <view class="player-info">
      <view class="player-name">{{currentMusic.name}}</view>
      <view class="player-time">{{formatTime(currentTime)}} / {{formatTime(duration)}}</view>
    </view>
    <view class="player-control">
      <button class="player-btn" bindtap="togglePlay">
        <image src="{{isPlaying ? 'pause.png' : 'play.png'}}"></image>
      </button>
      <button class="player-btn" bindtap="playPrev">
        <image src="prev.png"></image>
      </button>
      <button class="player-btn" bindtap="playNext">
        <image src="next.png"></image>
      </button>
    </view>
  </view>
</view>

Page({
  data: {
    playList: [{
      name: '歌曲1',
      src: 'http://music.163.com/song/media/outer/url?id=1436709403.mp3',
    }, {
      name: '歌曲2',
      src: 'http://music.163.com/song/media/outer/url?id=1436709404.mp3',
    }],
    currentMusic: {},
    isPlaying: false,
    currentTime: 0,
    duration: 0,
  },
  onLoad: function () {
    this.setData({
      currentMusic: this.data.playList[0],
    })
  },
  playMusic: function (event) {
    var index = event.currentTarget.dataset.index;
    var music = this.data.playList[index];
    this.setData({
      currentMusic: music,
      isPlaying: true,
    })
    this.play();
  },
  play: function () {
    this.setData({
      isPlaying: true,
    })
    var audio = wx.createInnerAudioContext();
    audio.src = this.data.currentMusic.src;
    audio.play();
    this.setData({
      audio: audio,
    })
  },
  togglePlay: function () {
    var audio = this.data.audio;
    if (this.data.isPlaying) {
      audio.pause();
      this.setData({
        isPlaying: false,
      })
    } else {
      audio.play();
      this.setData({
        isPlaying: true,
      })
    }
  },
  playPrev: function () {
    var index = this.data.playList.findIndex(item => item.src === this.data.currentMusic.src);
    if (index === 0) {
      index = this.data.playList.length - 1;
    } else {
      index--;
    }
    var music = this.data.playList[index];
    this.setData({
      currentMusic: music,
      isPlaying: true,
    })
    this.play();
  },
  playNext: function () {
    var index = this.data.playList.findIndex(item => item.src === this.data.currentMusic.src);
    if (index === this.data.playList.length - 1) {
      index = 0;
    } else {
      index++;
    }
    var music = this.data.playList[index];
    this.setData({
      currentMusic: music,
      isPlaying: true,
    })
    this.play();
  },
  updateTime: function (event) {
    var currentTime = Math.floor(event.detail.currentTime);
    var duration = Math.floor(event.detail.duration);
    this.setData({
      currentTime: currentTime,
      duration: duration,
    })
  },
  formatTime: function (time) {
    var minutes = Math.floor(time / 60);
    var seconds = time - minutes * 60;
    return minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
  },
  audioError: function (event) {
    wx.showToast({
      title: '播放失败',
      icon: 'none',
    })
  },
})

上面的代码实现了一个包含播放列表和播放器的小程序。播放列表通过一个滚动视图实现，点击列表中的歌曲即可播放。播放器包含了播放、暂停、上一曲和下一曲等常用功能，同时显示了当前歌曲的名称和播放时间。

需要注意的是，由于小程序中无法直接使用 `audio` 标签，所以我们需要通过 `wx.createInnerAudioContext()` 方法创建一个音频播放实例。同时，为了保证在后台播放时音乐不会停止，需要在 `app.json` 文件中设置 `backgroundAudioPlaying` 为 `true`。

{
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "selectedColor": "#1AAD19",
    "backgroundColor": "#FFFFFF",
    "color": "#7A7E83",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/icon_home.png",
      "selectedIconPath": "images/icon_home_active.png"
    }, {
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "images/icon_my.png",
      "selectedIconPath": "images/icon_my_active.png"
    }]
  },
  "backgroundAudioPlaying": true
}