微信小程序之——音频播放

• audio

• getBackgroundAudioManager

audio

官方 1.6.0 版本开始，该组件不再维护

实现的示例 官网 有详细的文档介绍

getBackgroundAudioManager

wx.getBackgroundAudioManager()

官方文档

获取全局唯一的背景音频管理器。

小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。

wxml

<view class="container">
  <view class='background'>
    <view class='info'>
      <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">{{audioList[audioIndex].name||""}}</view>
      <!-- <view>{{audioList[audioIndex].author||""}}</view> -->
    </view>
    <view class='progress'>
      <text class="text1">{{progressText}}/{{durationText}}</text>
      <slider class='bar' bindchange="sliderChange" bindchanging="sliderChanging" value="{{progress}}" step="1" min='0' max='{{duration}}' activeColor="#cf0103" block-size="4" block-color="#c1c2c3" />
      
    </view>
    <view class='buttons'>
      <image class='button' bindtap='playOrpause' src='{{playStatus?"/images/pause.png":"/images/play.png"}}'></image>
    </view>
  </view>
</view>

格式如下：

[{
   src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?', 
　　poster: 'https://616e-anilagle-7474cd-1256663410.tcb.qcloud.la/logo部分的补充图/4.JPG?sign=62938ddecd979722c6726c100d8119fb&t=1547648207', 
　　name: '音频名称', 
　　author: '作者名称' 
}]

js

import data from "../../utils/data.js";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    playStatus: true,
    audioIndex: -1,//如果直接播放则改为对应下标
    progress: 0,
    duration: 0,
    audioList: [],
    showList: true,

    text: '',
    marqueePace: 1,//滚动速度
    marqueeDistance: 0,//初始滚动距离
    marqueeDistance2: 0,
    marquee2copy_status: false,
    marquee2_margin: 60,
    size: 14,
    orientation: 'left',//滚动方向
    interval: 20 // 时间间隔
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    this.setData({
      audioList: data
    })
    this.setData({
      audioIndex: 1,
      showList: false
    })
    this.playMusic();
    // console.log(data)
    //初始化时默认不播放
    // this.playMusic();

    // 页面显示
    var vm = this;
    var length = 3 * vm.data.size;//文字长度
    var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
    vm.setData({
      length: length,
      windowWidth: windowWidth,
      marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时，需要增加补白
    });
    vm.run1();// 水平一行字滚动完了再按照原来的方向滚动
  },
  run1: function () {
    var vm = this;
    var interval = setInterval(function () {
      if (-vm.data.marqueeDistance < vm.data.length) {
        vm.setData({
          marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
        });
      } else {
        clearInterval(interval);
        vm.setData({
          marqueeDistance: vm.data.windowWidth
        });
        vm.run1();
     }
    }, vm.data.interval);
  },
  playMusic: function () {
    let audio = this.data.audioList[this.data.audioIndex];
    let manager = wx.getBackgroundAudioManager();
    manager.title = audio.name || "音频标题";
    manager.epname = audio.epname || "专辑名称";
    manager.singer = audio.author || "歌手名";
    manager.coverImgUrl = audio.poster;
    // 设置了 src 之后会自动播放
    manager.src = audio.src;
    manager.currentTime = 0;
    let that = this;
    manager.onPlay(function () {
      // console.log("======onPlay======");
      that.setData({
        playStatus: true
      })
      that.countTimeDown(that, manager);
    });
    manager.onPause(function () {
      that.setData({
        playStatus: false
      })
      // console.log("======onPause======");
    });
    manager.onEnded(function () {
      // console.log("======onEnded======");
      that.setData({
        playStatus: false
      })
      setTimeout(function () {
        that.nextMusic();
      }, 1500);
    });
  },

  //循环计时
  countTimeDown: function (that, manager, cancel) {
    if (that.data.playStatus) {
      setTimeout(function () {
        if (that.data.playStatus) {
          // console.log("duration: " + manager.duration);
          // console.log(manager.currentTime);
          that.setData({
            progress: Math.ceil(manager.currentTime),
            progressText: that.formatTime(Math.ceil(manager.currentTime)),
            duration: Math.ceil(manager.duration),
            durationText: that.formatTime(Math.ceil(manager.duration))
          })
          that.countTimeDown(that, manager);
        }
      }, 1000)
    }
  },

  //拖动事件
  sliderChange: function (e) {
    let manager = wx.getBackgroundAudioManager();
    manager.pause();
    manager.seek(e.detail.value);
    this.setData({
      progressText: this.formatTime(e.detail.value)
    })
    setTimeout(function () {
      manager.play();
    }, 1000);
  },

  //列表点击事件
  listClick: function (e) {
    let pos = e.currentTarget.dataset.pos;
    if (pos != this.data.audioIndex) {
      this.setData({
        audioIndex: pos,
        showList: false
      })
      this.playMusic();
    } else {
      this.setData({
        showList: false
      })
      //更改播放状态
      this.playOrpause();
    }
  },

  //上一首
  lastMusic: function () {
    let audioIndex = this.data.audioIndex > 0 ? this.data.audioIndex - 1 : this.data.audioList.length - 1;
    this.setData({
      audioIndex: audioIndex,
      playStatus: false,
      progress: 0,
      progressText: "00:00",
      durationText: "00:00"
    })
    setTimeout(function () {
      this.playMusic();
    }.bind(this), 1000);
  },

  //播放按钮
  playOrpause: function () {
    let manager = wx.getBackgroundAudioManager();
    if (this.data.playStatus) {
      manager.pause();
    } else {
      manager.play();
    }
  },

  //下一首
  nextMusic: function () {
    let audioIndex = this.data.audioIndex < this.data.audioList.length - 1 ? this.data.audioIndex + 1 : 0;
    this.setData({
      audioIndex: audioIndex,
      playStatus: false,
      progress: 0,
      progressText: "00:00",
      durationText: "00:00"
    })
    setTimeout(function () {
      this.playMusic();
    }.bind(this), 1000);
  },

  //界面切换
  pageChange: function () {
    this.setData({
      showList: true
    })
  },

  //格式化时长
  formatTime: function (s) {
    let t = '';
    s = Math.floor(s);
    if (s > -1) {
      let min = Math.floor(s / 60) % 60;
      let sec = s % 60;
      if (min < 10) {
        t += "0";
      }
      t += min + ":";
      if (sec < 10) {
        t += "0";
      }
      t += sec;
    }
    return t;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxss

.item {
  border: 1rpx solid #eee;
  padding: 10rpx;
  font-size: 11pt;
}

.active {
  background: #a51515;
  color: #fff;
}

.background {
  position: fixed;
  left: 0;
  /* top: 0; */
  right: 0;
  bottom: 0;
  /* text-align: center; */
  background: #f5f5f5;
}

.background .info{
  /* position: fixed; */
  /* top: 140rpx; */
  padding: 3px 18px 2px 108rpx;
  /* padding-left: 60px; */
  height: 21px;
  left: 0;
  right: 0;
  font-size: 12pt;
  color: #353535;
}

.background .list {
  position: fixed;
  right: 40rpx;
  top: 40rpx;
  width: 60rpx;
  height: 60rpx;
}

.background .poster {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-top: 400rpx;
}

.rotate {
  animation: rotate 10s linear infinite;
}

.rotate-paused {
  animation: rotate 10s linear infinite;
  animation-play-state: paused;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.progress {
  /* position: fixed; */
  bottom: 90rpx;
  left: 50rpx;
  right: 50rpx;
  display: flex;
  /* align-items: center; */
  font-size: 10pt;
  color: rgb(87, 49, 49);
  /* text-align: center; */
}

.progress .bar {
  flex: 1;
  padding: 8rpx 0 22rpx 230rpx;
  margin: 0 20px;
}

.progress text {
  flex-basis: 90rpx;
}
.progress .text1 {
  position: fixed;
  left: 108rpx;
  bottom: 24rpx;
}
.progress .text2 {
  position: fixed;
  right: 40rpx;
}

.buttons {
  position: fixed;
  bottom: 0;
  /* left: 25rpx; */
  /* right: 50rpx; */
  display: flex;
  width: 60px;
  height: 60px;
  z-index: 9999;
  background: #f5f5f5;
}

.buttons .button {
  position: relative;
  width: 70rpx;
  height: 70rpx;
  left: 25rpx;
  top: 20rpx;
}

.example {
  display: block;
  width: 100%;
  height: 100rpx;
 }
 
 .marquee_box {
  width: 100%;
  position: relative;
 }
 
 .marquee_text {
  white-space: nowrap;
  position: absolute;
  margin-left: 108rpx;
  overflow: hidden;
  /* top: 0; */
 }

效果

标题是从右往左滚动的

 因为是需求，这里只显示了音频名称，需要怎样的效果可以通过css样式来调整