微信小程序—InnerAudioContext实现一个音乐播放器

最新推荐文章于 2026-06-08 11:42:31 发布

原创

最新推荐文章于 2026-06-08 11:42:31 发布 · 3.4k 阅读

本文详细介绍了一款具备音乐播放、进度控制、封面旋转动画及背景模糊效果的小程序开发过程，涵盖从界面设计到功能实现的全部代码。

直接上效果：

在这里插入图片描述

体验：

自定义系列>>音乐播放器
在这里插入图片描述
功能描述：
1、可播放、暂停内置的一条音乐
2、可控制播放进度
3、音乐封面在播放过程中实现旋转动画
4、背景图片表现为音乐封面的高斯模糊
5、离开页面音乐停止播放

完整代码：

const app = getApp()
const innerAudioContext = wx.createInnerAudioContext();
var _animation; // 动画实体
var _animationIndex = 0; // 动画执行次数index（当前执行了多少次）
var _animationIntervalId = -1; // 动画定时任务id，通过setInterval来达到无限旋转，记录id，用于结束定时任务
const _ANIMATION_TIME = 200; // 动画播放一次的时长ms
Page({
   
   
  data: {
   
   
    menuButtonBoundingClientRect:{
   
   },
    systemInfo:{
   
   },
    clickPlay: true,
    playSrc: 'play-normal.png',
    preSrc: './pre-normal.png',
    nextSrc: './next-normal.png',
    animation: '',
    isRing: false,

    audiolist: [
      {
   
   
        audiosrc: 'https://6e6f-normal-env-4598.tcb.qcloud.la/mp3/04a9_485d_772f_2493d24b7f1b040256002d8283a4cad0.mp3?sign=b4889da8c5373cad5279086359f27fcc&t=1583118236',
  audioImage:"cloud://normal-env-t6f-normal-etac-1300924598/meinv/u=2367451530,795833927&fm=26&gp=0.jpg",audioName:"上海滩",
      }
    ],
    isPlayAudio: false,
    audioSeek: 0,
    audioDuration: 0,
    showTime1: '00:00',
    showTime2: '00:00',
    audioTime: 0,
    textVoiceMarginTop: '',
    viewCircleContainerMarginTop: '',
    audioPlayerMarginTop: '',
    controlContainerMarginTop: '',
  },
  go2Home() {
   
   
    wx.navigateBack({
   
   
      delta: 1,
    })
  },
  onLoad: function (options) {
   
   
    var that = this
    wx.getSystemInfo({
   
   
      success: function (res) {
   
   
        //model中包含着设备信息
        console.log(res)
        that.setData({
   
   
          menuButtonBoundingClientRect: wx.getMenuButtonBoundingClientRect(),
          systemInfo:res
        })
        var model = res.model
        if (model.search('iPhone X') != -1) {
   
   
          app.globalData.isIpx = true;
        } else {
   
   
          app.globalData.isIpx = false;
        }
      }
    })
    console.log(app.globalData.isIpx)
    let isPhone = app.globalData.isIpx;
    if (isPhone) {
   
   
      this.setData({
   
   
        textVoiceMarginTop: "105rpx",
        viewCircleContainerMarginTop: "100rpx",
        audioPlayerMarginTop: "200rpx",
        controlContainerMarginTop: "100rpx",
      })
    } else {
   
   
      this.setData({
   
   
        textVoiceMarginTop: "60rpx",
        viewCircleContainerMarginTop: "80rpx",
        audioPlayerMarginTop: "140rpx",
        controlContainerMarginTop: "30rpx"
      })
    }
  },
  touchPreStart: function () {
   
   
    var preSrc = this.data.preSrc;
    this.setData({
   
   
      preSrc: './pre-normal.png'
    })
  },
  touchPreEnd: function () {
   
   
    var preSrc = this.data.preSrc;
    this.setData({
   
   
      preSrc: './pre-normal.png'
    })
  },
  touchNextStart: function () {
   
   
    var nextSrc = this.data.nextSrc;
    this.setData({
   
   
      nextSrc: './next-normal.png'
    })
  },
  touchNextEnd: function () {
   
   
    var nextSrc = this.data.nextSrc;
    this.setData({
   
   
      nextSrc: './next-normal.png'
    })
  },
  changePlay: function () {
   
   
    var playSrc