微信小程序音乐播放器组件
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版本开始,该 ...
随机推荐
- 未能加载文件或程序集 Microsoft.ReportViewer.ProcessingObjectModel, Version=10.0.0.0
写在前面 整理错误集.某一天在启动项目的时候,出现了未能加载文件或程序集 Microsoft.ReportViewer.ProcessingObjectModel, Version=10.0.0.0错 ...
- dump net core windbg 安装
安装 1.下载工具windbg 地址:https://www.microsoft.com/zh-cn/p/windbg-preview/9pgjgd53tn86?SilentAuth=1&rt ...
- kali之使用sqlmap进行sql注入
sqlmap简介 sqlmap支持五种不同的注入模式: 1.基于布尔的盲注,即可以根据返回页面判断条件真假的注入. 2.基于时间的盲注,即不能根据页面返回内容判断任何信息,用条件语句查看时间延迟语句是 ...
- JavaScript_proto_和prototype到底是什么玩意
_proto_和prototype到底有什么区别啊?是个什么东西啊? 在这里我头也比较大啊,小学语文没学好,所以组织能力比较差劲,所以尽量的咱用代码来解释吧. function too() { thi ...
- nodeJS从入门到进阶一(基础部分)
一.Node.js基础知识 1.概念 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是JavaScript的运行环境 Node.js 使用了一个事件驱动.非阻塞 ...
- PHP防止SQL注入攻击和XSS攻击
代码如下: /** * 防SQL注入和XSS攻击 * @param $arr */ function SafeFilter (&$arr) { $ra=Array('/([\x00-\x08, ...
- UAVCAN DSDL介绍
原文:http://uavcan.org/Specification/3._Data_structure_description_language/ DSDL:Data structure descr ...
- Celery:Daemonization
参考文档:http://docs.celeryproject.org/en/latest/userguide/daemonizing.html#daemonizing
- JavaWeb项目目录结构
今天本来是准备学习spring mvc + mybatis,结果被idea的配置环境卡主了,自己刚刚接触JavaWeb不久,所以浪费了很多时间.最终我回归最简单的servlet & jsp,并 ...
- C#对MongDB取数据的常用代码
1.使用聚合取最新的实时数据(每一个测站有多条数据,取日期最新的数据.也就是每个测站取最新的值) var group = new BsonDocument { {"_id",new ...