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. ArcGIS Engine开发鹰眼图的功能(代码优化篇)

    在上一篇,ArcGIS Engine开发鹰眼图的功能(基础篇) 上一篇的实现效果图如下, 如果仔细观察,会发现一个问题,即在“鹰眼”的区域,只要在红色线框内的注记会被覆盖. 如果红色框包括整张图的话, ...

  2. 强大的Grafana k8s 插件

    原文参考: https://i4t.com/4152.html 参考:https://blog.csdn.net/mailjoin/article/details/81389700 插件链接:http ...

  3. dp的平行四边形优化

    证明过程转载自charliezhi2007的博客 题目链接 备用链接 分析:一道区间dp,状态转移方程\(dp[i][j]=min(dp[i][j],dp[i][s]+dp[s+1][j]+sum[j ...

  4. 2019 小米java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.小米等公司offer,岗位是Java后端开发,因为发展原因最终选择去了小米,入职一年时间了,也成为了面试官,之 ...

  5. aria2 adduri

    demo, ok import 'package:flutter/material.dart'; import 'package:permission_handler/permission_handl ...

  6. Privoxy搭建代理服务器

    Privoxy搭建代理服务器 Docker Hub镜像地址 Dockerfile FROM alpine EXPOSE 8118 RUN apk --no-cache --update add pri ...

  7. nodeJS微信JSDK 配置

    nodeJS微信JSDK 配置 一.微信公众平台申请一个测试公众号 二.配置nodeJS 使用express框架搭建服务器 微信生成签名步骤: 1.获取token 2.通过token,获取jsapi_ ...

  8. 79.mobile/js---手机端分享调用功能的实现(只能在真机上测试有效)

    html:<a href="javascript:void(0);" class="all-share" onclick="call('defa ...

  9. Alpha_4

    一. 站立式会议照片 二. 工作进展 (1) 昨天已完成的工作 a. 我的·主界面设计 b. 番茄钟的页面及音乐选择弹窗页面设计 c. 实现自定义习惯和设置新习惯的功能页面,并可预览 d.已实现番茄钟 ...

  10. 编程风格统一配置EditorConfig

    EditorConfig 以纯原生无需任何插件支持 EditorConfig 代码风格配置的编辑器: Visual Studio 2017 开始添加了对 EditorConfig 的原生支持.Visu ...