微信小程序 背景音乐

在微信小程序中，背景音乐是指在当前页面播放后，即使切换到当前小程序的其他页面，也不会停止播放。但当小程序退出后，背景音乐就会停止播放。小程序提供了一组用于播放背景音乐的API，包括播放背景音乐、暂停背景音乐、停止背景音乐和随机定位背景音乐等功能。使用对应的方法即可实现相应功能。例如，使用wx.playBackgroundAudio可以播放背景音乐，wx.pauseBackgroundAudio可以暂停背景音乐，wx.stopBackgroundAudio可以停止背景音乐，wx.seekBackgroundAudio可以随机定位背景音乐。通过调用这些API，开发者可以在小程序中实现背景音乐的播放功能。

相关问题

微信小程序音乐播放器

微信小程序音乐播放器是一个名为"ChickenMusic音乐播放器"的微信小程序，可以通过在微信小程序中搜索并找到。该音乐播放器具有以下功能：
1. 首页：可以进行歌曲和歌手搜索，浏览轮播图、各大榜单和热门歌单等。
2. 正在播放：展示当前正在播放的歌曲信息，包括歌曲标题和歌手名字。同时还有专辑封面图以及播放进度和时间的显示。可以通过滑动条来调整播放进度。

该音乐播放器的界面布局文件(play.wxml)中包含了播放器的各个组件的代码。播放器界面包括音乐信息、专辑封面、播放进度和时间等。具体代码如下：

<view class="content-play">
    <!--显示音乐信息-->
    <view class="content-play-info">
        <text>{{play.title}}</text>
        <view>—— {{play.singer}} ——</view>
    </view>
    <!-- 显示专辑封面 -->
    <view class="content-play-cover">
        <image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" />
    </view>
    <!--显示播放进度和时间-->
    <view class="content-play-progress">
        <text>{{play.currentTime}}</text>
        <view>
            <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
        </view>
        <text>{{play.duration}}</text>
    </view>
</view>

此外，该音乐播放器的配置文件(index.json)设置了导航栏的背景颜色、标题文字和样式等。具体代码如下：

{
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "音乐",
    "navigationBarTextStyle": "black"
}

如果你希望获取该音乐播放器的源码包，你可以点击以下链接进行下载：
链接：https://pan.baidu.com/s/1yFkSCOSpRoy9YtaX7ZNQdA?pwd=4d2k
提取码：4d2k

微信小程序音乐播放器js代码

以下是一个简单的微信小程序音乐播放器的 js 代码示例：

// 获取全局唯一的背景音频管理器
const backgroundAudioManager = wx.getBackgroundAudioManager()

Page({
  data: {
    // 歌曲名
    songName: '未知歌曲',
    // 歌手名
    singerName: '未知歌手',
    // 专辑封面
    albumCover: '',
    // 歌曲总时长
    duration: '00:00',
    // 当前播放时间
    currentTime: '00:00',
    // 播放状态（0：未播放，1：正在播放，2：暂停）
    playStatus: 0,
    // 歌曲列表
    songList: [{
      id: 1,
      songName: '歌曲1',
      singerName: '歌手1',
      albumCover: 'https://xxx/xxx/xxx.jpg',
      musicUrl: 'https://xxx/xxx/xxx.mp3'
    }, {
      id: 2,
      songName: '歌曲2',
      singerName: '歌手2',
      albumCover: 'https://xxx/xxx/xxx.jpg',
      musicUrl: 'https://xxx/xxx/xxx.mp3'
    }]
  },

  // 播放/暂停
  playOrPause: function() {
    if (this.data.playStatus === 0) {
      // 如果未播放，则开始播放第一首歌曲
      this.playSong(0)
    } else if (this.data.playStatus === 1) {
      // 如果正在播放，则暂停
      backgroundAudioManager.pause()
      this.setData({
        playStatus: 2
      })
    } else if (this.data.playStatus === 2) {
      // 如果已暂停，则继续播放
      backgroundAudioManager.play()
      this.setData({
        playStatus: 1
      })
    }
  },

  // 播放指定歌曲
  playSong: function(index) {
    const song = this.data.songList[index]

    // 设置背景音频数据
    backgroundAudioManager.title = song.songName
    backgroundAudioManager.singer = song.singerName
    backgroundAudioManager.coverImgUrl = song.albumCover
    backgroundAudioManager.src = song.musicUrl

    // 监听背景音频播放事件
    backgroundAudioManager.onPlay(() => {
      console.log('onPlay')
      this.setData({
        playStatus: 1
      })
    })

    // 监听背景音频暂停事件
    backgroundAudioManager.onPause(() => {
      console.log('onPause')
      this.setData({
        playStatus: 2
      })
    })

    // 监听背景音频停止事件
    backgroundAudioManager.onStop(() => {
      console.log('onStop')
      this.setData({
        playStatus: 0,
        currentTime: '00:00'
      })
    })

    // 监听背景音频播放进度更新事件
    backgroundAudioManager.onTimeUpdate(() => {
      console.log('onTimeUpdate')
      const duration = backgroundAudioManager.duration
      const currentTime = backgroundAudioManager.currentTime

      this.setData({
        duration: this.formatTime(duration),
        currentTime: this.formatTime(currentTime)
      })
    })

    // 监听背景音频自然播放结束事件
    backgroundAudioManager.onEnded(() => {
      console.log('onEnded')
      const nextIndex = index + 1

      if (nextIndex < this.data.songList.length) {
        // 如果还有下一首歌曲，则播放下一首
        this.playSong(nextIndex)
      } else {
        // 如果已经播放完所有歌曲，则停止播放
        backgroundAudioManager.stop()
        this.setData({
          playStatus: 0,
          currentTime: '00:00'
        })
      }
    })
  },

  // 格式化时间
  formatTime: function(time) {
    const minutes = Math.floor(time / 60)
    const seconds = Math.floor(time % 60)

    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
  }
})

在上面的代码中，我们定义了一个 `backgroundAudioManager` 对象，用于管理背景音频的播放、暂停、停止等操作。同时，我们还定义了一个 `Page` 对象，用于管理页面的数据和事件处理。在 `Page` 对象的 `data` 属性中，我们定义了一些与播放器相关的数据，包括歌曲名、歌手名、专辑封面、歌曲总时长、当前播放时间、播放状态和歌曲列表。在 `Page` 对象的方法中，我们定义了一些与播放器相关的事件处理函数，包括播放/暂停、播放指定歌曲、格式化时间等。在 `playOrPause` 方法中，我们根据播放状态执行不同的操作，如果未播放，则开始播放第一首歌曲；如果正在播放，则暂停；如果已暂停，则继续播放。在 `playSong` 方法中，我们设置了背景音频数据，并监听了背景音频的播放、暂停、停止、进度更新和自然播放结束等事件。在 `formatTime` 方法中，我们将时间格式化为 `mm:ss` 的形式。