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. 微信小程序音乐播放器

    写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...

  2. 微信小程序音乐播放

    最近在写一个艾美食艾音乐的微信小程序,其中有用到音乐播放的功能,基本播放切换功能已经实现,但是在反复切换歌曲.重新进入歌曲以及单曲循环.列表循环的测试过程中还是发生了bug,特此写一篇文章,捋一下思路 ...

  3. 微信小程序——音频播放器

    先来个效果图韵下味: 需求: 音频的播放,暂停,中间按钮状态的变化,播放时实时更新播放进度: 前进15s,后退15s: 进度条拖动. 一开始想着这3个功能应该挺简单的.不就是播放,暂停,前进,后退么~ ...

  4. 微信小程序---音乐播放和控制

    1.效果图如下: 2.代码如下: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInf ...

  5. 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)

    自动发单,自动评价,自动评论,自动推广 微信小程序自运营器  微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...

  6. 微信小程序页面调用自定义组件内的事件

    微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...

  7. 微信小程序api拦截器

    微信小程序api拦截器 完美兼容原生小程序项目 完美兼用小程序api的原本调用方式,无痛迁移 小程序api全Promise化 和axios一样的请求方式 小程序api自定义拦截调用参数和返回结果 强大 ...

  8. 微信小程序(二十)-UI组件(Vant Weapp)-01按装配置

    1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...

  9. 微信小程序音频播放 InnerAudioContext 的用法

    今天项目上涉及到了微信小程序播放音频功能,所以今天跟着一些教程做了个简单的播放器 1.实现思路 刚开始想着有没有现成的组件可以直接用,找到了微信的媒体组件 audio,奈何看着 1.6.0版本开始,该 ...

随机推荐

  1. 在.net core中数据操作的两种方式(Db first && Code first)

    在开发过程中我们通常使用的是Db first这种模式,而在.net core 中推荐使用的却是 code first 反正我是很不习惯这种开发模式 于是就搜寻整个微软的官方文档,终于找到了有关.net ...

  2. springCloud学习6(Spring Cloud Sleuth 分布式跟踪)

    springcloud 总集:https://www.tapme.top/blog/detail/2019-02-28-11-33 前言   在第四篇和第五篇中提到一个叫关联 id的东西,用这个东西来 ...

  3. 【MFC】在CHtmlView中在同一窗口显示新打开页面

    使用MFC的单文档,用IE核心做的简单浏览器.当打开一个新的链接时,IE核心会使用IE来打开一个新窗口显示打开的新页面.为了让新页面在本程序中显示,我试了如下方法,其中的问题一并列出: 方法1.重载C ...

  4. 如何选择优秀的APS系统供应商?问自己这几个问题!

    高级的计划和排程和生产排程软件的好处是巨大的.然而,生产排程软件不是商品,尚不能保证您选择的任何高级的计划和排程软件能满足您的所有需求. 那么,我们来谈谈如何选择适合你的公司最好的生产排程软件.这需要 ...

  5. npm 更换阿里淘宝源

    执行命令 npm config set registry https://registry.npm.taobao.org/ 查看是否已经更换成功 npm config get registry

  6. gitlab中clone项目时,IP地址是一串数字

    问题:docker安装后,clone显示ip是一串地址 解决(如果是非docker启动的,自然就是进入gitlab下): 1.进入docker 后台: docker exec -it gitlab / ...

  7. Python学习日记(二十八) hashlib模块、configparse模块、logging模块

    hashlib模块 主要提供字符加密算法功能,如md5.sha1.sha224.sha512.sha384等,这里的加密算法称为摘要算法.什么是摘要算法?它又称为哈希算法.散列算法,它通过一个函数把任 ...

  8. session有效期设置的两种方式

    /**session有效期设置的两种方式: * 1.代码设置:session.setMaxInactiveInterval(30);//单位:秒.30秒有效期,默认30分钟. * 2.web.xml中 ...

  9. 【Docker】docker安装mysql

    一.下载镜像并运行容器 docker run -p 3306:3306 --name mymysql -v $PWD/conf:/etc/mysql/conf.d -v $PWD/logs:/logs ...

  10. linux中container_of

    linux 驱动程序中 container_of宏解析 众所周知,linux内核的主要开发语言是C,但是现在内核的框架使用了非常多的面向对象的思想,这就面临了一个用C语言来实现面向对象编程的问题,今天 ...