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


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 LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
js密码强度校验
Nov 10 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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 空格,换行,跳格使用说明
2009/12/18 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php文件缓存类汇总
2014/11/21 PHP
前端必学之PHP语法基础
2016/01/01 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
node.js基础知识小结
2018/02/26 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python lambda和Python def区别分析
2014/11/30 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python操作gitlab API过程解析
2019/12/27 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
销售人员自我评价
2014/02/01 职场文书
单位活动策划方案
2014/08/17 职场文书
给老婆的道歉信
2015/01/20 职场文书
展览会邀请函
2015/02/02 职场文书
世界文化遗产导游词
2019/08/07 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL