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


Posted in Javascript onJune 19, 2020

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

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

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

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

Javascript 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 #Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 #Javascript
小程序实现多个选项卡切换
Jun 19 #Javascript
微信小程序 button样式设置为图片的方法
Jun 19 #Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 #Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 #Javascript
深入解读VUE中的异步渲染的实现
Jun 19 #Javascript
You might like
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
form中限制文本字节数js代码
2007/06/10 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
jquery中的过滤操作详细解析
2013/12/02 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
python服务器端收发请求的实现代码
2014/09/29 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
颐和园导游词
2015/01/30 职场文书
教师节慰问信
2015/02/15 职场文书
法院个人总结
2015/03/03 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
八年级英语教学反思
2016/02/15 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫