小程序如何实现背景音乐播放与暂停功能？

2026-04-03 08:561阅读0评论SEO资讯

内容介绍
文章标签
相关推荐

本文共计756个文字，预计阅读时间需要4分钟。

原文示例：本文字例为大家庭分享了小程序背景音乐，供大家参考，具体内容如下：我做这个项目的需求，用到的是一个背景音乐的播放和暂停；当用户点击进入音乐界面的时候，用户需要手动点击播放对。

改写后：示例：大家庭分享小程序背景音乐，供参考。项目需求：实现背景音乐播放与暂停功能；用户进入音乐界面需手动操作播放按钮。

本文实例为大家分享了小程序背景音乐，供大家参考，具体内容如下

我做这个项目的需求，用到一个背景音乐的播放和暂停；
当用户点击进入音乐界面的时候用户需要手动点击播放对应的音乐，那么播放以后推出音乐界面这个音乐还是处于播放状态，以及音乐的图标的状态也一个是播放。so看看代码吧！
那这里用到了一个新的api 知点，wx.createInnerAudioContext，可以参考小程序官方文档 wx.createInnerAudioContext

具体属性

innerAudioContext.autoplay = true 是否自动播放
innerAudioContext.src=“url” 音乐路径
方法 innerAudioContext.onPlay() 播放
InnerAudioContext.pause() 暂停

首先看一下我的目录结构

我的照片放在了images里。主页面是ceshi.wxml ，音乐播放界面是index.wxml

开始上菜，ceshi.wxml

<button bindtap='click'>click me</button>

ceshi.js

click(){ wx.navigateTo({ url: '../index/index', }) },

index.wxml

<view class='bgmView' catchtap='BGM'> <image wx:if='{{bgm}}' class='bgmImg {{bgmImgAni}}' src='/images/kaishi.png'></image> <image wx:else class='bgmImg' src='/images/zanting.png'></image> </view>

index.wxss

/* 背景音乐 */ .bgmView { position: fixed; top: 20rpx; right: 20rpx; z-index: 99; } .bgmImg { width: 70rpx; height: 70rpx; } .bgmImgAni { animation: jumpball 4s infinite linear; } @keyframes jumpball { 100% { transform: rotate(360deg); }

index.js

// 背景音乐 const innerAudioContext = wx.createInnerAudioContext() Page({ /** - 页面的初始数据 */ data: { mp3: 'ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46', // 背景音乐 bgm: false, }, // 背景音乐 BGM: function(e) { let that = this; if (that.data.bgm) { that.setData({ bgm: false, }) innerAudioContext.pause(); /** 暂停音乐 */ } else { that.setData({ bgm: true, bgmImgAni: "bgmImgAni" }) // 播放音乐 innerAudioContext.autoplay = true innerAudioContext.loop = true innerAudioContext.src = that.data.mp3; innerAudioContext.play() } }, /** - 生命周期函数--页面卸载时 */ onUnload() { wx.setStorageSync("bgm", this.data.bgm) }, /** - 生命周期函数--监听页面加载 */ onLoad: function(e) { var bgm = wx.getStorageSync("bgm") this.setData({ bgm }) }, })

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。

标签：小程序实现背景音乐播放