本文实例为大家分享了小程序背景音乐,供大家参考,具体内容如下
我做这个项目的需求,用到一个背景音乐的播放和暂停;
当用户点击进入音乐界面的时候用户需要手动点击播放对应的音乐,那么播放以后推出音乐界面这个音乐还是处于播放状态,以及音乐的图标的状态也一个是播放。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 }) }, })
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“小程序实现背景音乐播放和暂停”评论...
更新动态
2024年04月29日
2024年04月29日
- 4.6版本隐藏锚点位置一览,隐藏锚点在哪
- 群星.2024-追风者电视剧影视原声带【SONY】【FLAC分轨】
- 曾庆瑜.1992-18首中英文经典全集【派森】【WAV+CUE】
- 群星.1991-华纳浪漫心曲精丫华纳】【WAV+CUE】
- 幕府将军 Shogun
- 纳克鲁斯 Knuckles
- 特污兔《填空题》[FLAC/分轨][239.68MB]
- 陈奕迅《黑白灰》台湾版[WAV+CUE][400M]
- 群星《三大发烧女声》3CD[WAV+CUE][2G]
- 英雄传说闪之轨迹北方战役国际版 5月29日全球同步上市
- 仙剑世界风启测试定档5月31日 感受属于东方的浪漫幻想世界
- 元气骑士前传星界法师怎么玩 操控黑暗禁忌
- 物华弥新迷踪盘第二关怎么过 迷踪盘第二关通关方法
- 物华弥新迷踪盘第三关怎么过 迷踪盘第三关通关方法
- 物华弥新迷踪盘第四关怎么过 迷踪盘第四关通关方法