小程序实现背景音乐播放和暂停

(编辑:jimmy 日期: 2024/10/31 浏览:2)

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

我做这个项目的需求,用到一个背景音乐的播放和暂停;
当用户点击进入音乐界面的时候用户需要手动点击播放对应的音乐,那么播放以后推出音乐界面这个音乐还是处于播放状态,以及音乐的图标的状态也一个是播放。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: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3"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
 })
 },
})

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

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

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。