微信小程序音乐播放器组件
wxml
<image bindtap="click" src="{{isPlay?'/images/':'/images/'}}"/>
JS
Page({
data:{
isPlay:false
},
onLoad(){
var self = this;
//监听音乐播放
wx.onBackgroundAudioPlay((result)=>{
self.setData({
isPlay:true
})
});
//监听音乐停止
wx.onBackgroundAudioPause((result)=>{
self.setData({
isPlay:false
})
});
},
//执行点击事件,如果播放就停止,如果停止就播放
click(){
if(this.data.isPlay){
wx.pauseBackgroundAudio();
this.setData({
isPlay:fasle
})
}else{
//开始音乐播放
wx.playBackgroundAudio({
dataUrl:"",
title:"",
coverImgUrl:""
});
this.setData({
isPlay:true
})
}
}
})
若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。
请点赞!因为你们的赞同/鼓励是我写作的最大动力!
欢迎关注达叔小生的简书!
这是一个有质量,有态度的博客

微信小程序音乐播放器组件的更多相关文章
- 微信小程序音乐播放器
写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...
- 微信小程序音乐播放
最近在写一个艾美食艾音乐的微信小程序,其中有用到音乐播放的功能,基本播放切换功能已经实现,但是在反复切换歌曲.重新进入歌曲以及单曲循环.列表循环的测试过程中还是发生了bug,特此写一篇文章,捋一下思路 ...
- 微信小程序——音频播放器
先来个效果图韵下味: 需求: 音频的播放,暂停,中间按钮状态的变化,播放时实时更新播放进度: 前进15s,后退15s: 进度条拖动. 一开始想着这3个功能应该挺简单的.不就是播放,暂停,前进,后退么~ ...
- 微信小程序---音乐播放和控制
1.效果图如下: 2.代码如下: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInf ...
- 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)
自动发单,自动评价,自动评论,自动推广 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- 微信小程序api拦截器
微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大 ...
- 微信小程序(二十)-UI组件(Vant Weapp)-01按装配置
1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...
- 微信小程序音频播放 InnerAudioContext 的用法
今天项目上涉及到了微信小程序播放音频功能,所以今天跟着一些教程做了个简单的播放器 1.实现思路 刚开始想着有没有现成的组件可以直接用,找到了微信的媒体组件 audio,奈何看着 1.6.0版本开始,该 ...
随机推荐
- 【转载】JAVA SpringBoot 项目打成jar包供第三方引用自动配置(Spring发现)解决方案
JAVA SpringBoot 项目打成jar包供第三方引用自动配置(Spring发现)解决方案 本文为转载,原文地址为:https://www.cnblogs.com/adversary/p/103 ...
- ssm(spring+springmvc+mybatis)整合之环境配置
1-1.导包 导入SpringMVC.Spring.MyBatis.mybatis-spring.mysql.druid.json.上传和下载.验证的包 1-2.创建并配置web.xml文件 配置sp ...
- 用StatSVN统计svn项目中每人代码提交量
用StatSVN统计SVN服务器项目的代码量 下载并安装SVN统计工具StatSVN 1)下载地址:sourceforge.net/projects/statsvn/ 2)解压压缩包,到一个目录,如D ...
- Flask整合WebLoader 用于大附件拆分上传再合并
博客:https://blog.csdn.net/jinixin/article/details/77545140 github:https://github.com/jinixin/upload-d ...
- 我的oracle 健康检查报告
最近一直想用sql来生成oracle的健康检查报告,这样看起来一目了然,经过网上搜资料加自己整理终于算是成型了,部分结果如下图所示, 具体参考附件,恳请广大网友看看是否还有需要添加的地方. DB_he ...
- 【故障处理】ORA-12162 错误的处理
[故障处理]ORA-12162: TNS:net service name is incorrectly specified 一.1 场景 今天拿到一个新的环境,可是执行sqlplus / as s ...
- thrift简单示例 (go语言)
这个thrift的简单示例来自于官网 (http://thrift.apache.org/tutorial/go), 因为官方提供的例子简单易懂, 所以没有必要额外考虑新的例子. 关于安装的教程, 可 ...
- Centos7.3安装nexus-3.14.0-04
nexus-3.14.0-04的安装 nexus-3.14.0-04-unix.tar.gz 1.下载nexus 2.上传到服务器/root ...
- 《大象 Thinking in UML》读书笔记:Process-oriented vs. Object-oriented
前言 面向过程 还是 面向对象?这不仅仅是个软件工程术语,其问题甚至可以追溯到亚里士多德:您把这个世界视为过程还是对象? 回归到现今的软件行业,这不仅仅是个某个具体编程技术问题,更是认识论问题. 认识 ...
- Linux命令——basename、dirname
简介 这2个命令多用于shell脚本 用法 basename filename_will_full_path dirname filename_will_full_path 对于但后缀的情况,base ...