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

网络编程 2021-07-04 15:03www.168986.cn编程入门

这篇文章主要为大家详细介绍了小程序实现背景音乐播放和暂停，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

具体属性

innerAudioContext.aulay = 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;
 : 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./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.aulay = 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
 })
 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇长沙网络推广为大家精心整理的，希望喜欢。

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

上一篇：小程序表单认证布局及验证详解下一篇：小程序选项卡以及swiper套用（跨页面）

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设