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

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

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

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

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

时间: 2020-06-18

微信小程序背景音乐开发详解

wx.getBackgroundAudioManager()  推荐大家使用背景音乐不在使用audio audio播放音频加载时间长 体验需求达不到 相关文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html 相关代码 const bgMusic = wx.getBackgroundAudioManager() //创建背景音乐 Page(

微信小程序 require机制详解及实例代码

微信小程序 require机制详解 一, JS模块加载:一次性加载全部JS, 但并不一定立即执行. 先提一提微信小程序架构: 类浏览器 -> HTTP本地服务 -> 云端服务 微信小程序运行的架构,基本上是浏览器 -> HTTP本地服务 -> 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源.读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件. 似乎比较简单,一个HTML 引用所有JS文件 既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HT

微信小程序 解析网页内容详解及实例

微信小程序 解析网页内容详解 最近在写一个爬虫,需要将网页进行解析供微信小程序使用.文字和图片解析都好说,小程序也有对应的text和image标签可以呈现.而更复杂的,比如表格,则比较棘手,不管是服务端解析还是小程序呈现都很费劲,也很难覆盖所有情况.于是我想,将表格对应的HTML代码转成图片,不失为一种变通的方法. 这里我们采用node-webshot模块,它对PhantomJS进行了轻量封装,可以轻松地将网页以截图形式保存下来. 首先安装Node.js和PhantomJS,然后新建一个js文件

微信小程序 navbar实例详解

微信小程序 navbar实例详解 实现效果图: data typeList: [ { name: "日报", id: "1" }, { name: "周报", id: "2" }, { name: "月报", id: "3" }, { name: "目录", id: "4" }] js that.setData({ dateValue: util.

微信小程序 页面传值详解

微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受. 如果需要传多个参数, 用 & 链接即可 如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递. 注 : 如果转化的字符串中 有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能

微信小程序 WXDropDownMenu组件详解及实例代码

微信小程序 WXDropDownMenu组件详解,这里给个小的示例,帮助大家学习理解, 功能: 适用于商品列表筛选与功能菜单跳转 先来看下效果图: 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写:交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单. 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单,初始隐藏.position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu { display: block; hei

微信小程序 template模板详解及实例

微信小程序 template模板详解及实例 首先看一些官方的一些介绍. 模板:模板功能是通过对template 标签的属性 name="" 去创建不同模板,通过is="name的值"来使用. 通过上面两张图,大概能看出,使用模板可以为大量类似的布局带来便利.下面看一下我自己的一个Demo. 先放出效果图(数据来自聚合数据) 可以看到,除了选项个数的差别之外,其他布局是相同的. 下面的每一道题的模板. <template name="carItem&q

微信小程序 template模板详解及实例代码

微信小程序 template模板详解 如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建.实现一次定义,到处使用. 模板 一.定义模板 1.新建一个template文件夹用来管理项目中所有的模板: 2.新建一个courseList.wxml文件来定义模板: 3.使用name属性,作为模板的名字.然后在<template/>内定义代码片段. 注意: a.可以看到一个.wxml文件中可以定义多个模板,只需要通过name来区分: b

微信小程序模版渲染详解

微信小程序的界面程序支持html语法,多加了一部分标签,如view.block.templete等. 模版渲染 index.wxml <view> <p>{{helloWord}}</p> </view> 其中{{}}里面包含的内容你可以理解为一个变量,怎么让程序解析出{{helloWord}}变量 在index.js 中注册这个变量 var json = { data:{ "helloWord" : "hello world&

微信小程序 Storage更新详解

前言 1.近期项目开发中接触到微信小程序,其中有部分业务需要用到数据本地存储,而微信的官方文档中并没用提供直接更新Storage的API. 2.通过wx.setStorage(Object object)可以达到覆盖原有数据达到更新的目的,但是在只修改某个对象中某个属性的值中使用这个API总感觉有点蹩脚. 3.下面笔者简单封装了一个方法用来修改Storage,若是有人知道更好的方法或者我的写法有问题还望不吝赐教. 问题描述 小程序首次登录时需要输入账号密码,首次登录成功后将账号与token保存本