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


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 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
vue实现简单瀑布流布局
May 28 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
Look And Say 序列php实现代码
2011/05/22 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php常用图片处理类
2016/03/16 PHP
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
深入理解python中的select模块
2017/04/23 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python实现的特征提取操作示例
2018/12/03 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
美国滑板店:Tactics
2020/11/08 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
物业工作计划书
2014/01/10 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
公司授权委托书范本
2014/04/03 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
作风建设年度心得体会
2014/10/29 职场文书
表扬信范文
2015/05/04 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python