wxml

<audio src="http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3" action="{{action}}" ></audio>

<button type="primary" bindtap="audioPlay" class='audio'>播放</button>

js

//action 控制音频的播放、暂停、播放速率、播放进度的对象,有 method 和 data 两个参数

data:{

action: {

method: 'pause'

}

}

audioPlay: function () {

var that = this;

if(that.data.action.method == 'pause'){

that.setData({

action: {

method: 'play'//播放

}

});

} else if (that.data.action.method == 'play'){

that.setData({

action: {

method: 'pause' //暂停

}

});

}

微信小程序audio的简单实用相关推荐

  1. 【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)

    开始前,请先完成启动/欢迎/首屏广告页的开发,详见 [微信小程序-原生开发]实用教程04-启动/欢迎/首屏广告页(含倒计时.添加文字.rpx.定义变量和函数.读取变量.修改变量.wx.reLaunch ...

  2. 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航

    开始前,请先完成项目创建,详见 [微信小程序-原生开发]实用教程01-注册登录账号,获取 AppID.下载安装开发工具.创建项目.上传体验 前期准备 因我们的项目是根据模板创建的,需先清理掉无效的页面 ...

  3. android商品数量加减,微信小程序实现一个简单的商品数量加减案例

    简介 这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...

  4. 【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏

    开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...

  5. 【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)

    开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...

  6. 【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)

    开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...

  7. 微信小程序html5音频,微信小程序 audio音频播放详解及实例

    loop:是否循环播放 id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象. bindplay:播放时触发该事件 b ...

  8. 微信小程序—audio(音频)

    今天来介绍一下微信小程序中音频播放控件–audio 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html 1.效果图如 ...

  9. 微信小程序嵌套h5页面+发布微信小程序(超级简单)

    将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!!! 使用到的技术为uniapp和web-view 首先,我们先来了解一下web-view是什么: 简单的一句话来讲:web-view 是 ...

  10. 微信小程序消息通知简单Demo

    前言   最近项目有需求需要用到微信小程序推送消息,在此记录一下实验过程. 前提准备 在开始前,你需要准备: 注册微信小程序 一个简单的springBoot 项目 微信开发者工具 正式 微信小程序发送 ...

最新文章

  1. bat、sh等批处理文件(脚本文件)
  2. RDP(远程桌面)优化
  3. Codeforces Round #627 (Div. 3) E. Sleeping Schedule dp
  4. mysql php宝塔 root_[转载]在安卓中安装宝塔面板运行PHP+MySQL
  5. 团建之后,我想离职了
  6. MySQL懒查询_mysql 联查的基本命令
  7. plink软件初体验3--计算样本杂合度和SNP位点杂合度
  8. QLineEdit光标问题
  9. uniapp中使用第三方百度地图
  10. 一次服务器上g1回收器发生fullgc的粗浅理解与记录
  11. 第一个HTML页面如何写?—零基础自学网页制作
  12. redis客户端通过哨兵获取主机、从机信息
  13. 2021春哈工大计算机系统大作业
  14. mysql 优化策略(如何利用好索引)
  15. SSM框架工作原理、作用及使用方法
  16. 为什么微信语音不能转发?知道真相后才发现我们都错怪了微信!
  17. Android 的65535放法数超限问题解决方案-AS方式、apk解析合并多dex、smali文件问题
  18. 金鉴实验室 PCBA切片分析 PCB检测
  19. 电脑网速慢怎么解决?提升网速真的很容易!
  20. 纪念userscripts.org

热门文章

  1. pandas excel合并去重
  2. VAT number 增值税号码以及GST
  3. GAMS系列分享20—GAMS电力系统—目标函数增量线性化
  4. 重读微积分(八):全微分和法线
  5. 【单片机笔记】STM8S003F3使用内部基准电压测量供电电压
  6. xjoj挖金矿(二分验证)
  7. Vue核心技术-40,vue-router-编程式路由导航
  8. 替代CH7511B DP转LVDS屏换接设计|替代CH7511B EDP转LVDS转接板电路|CS5211电路原理图
  9. DocLocker - 文档外发控制系统
  10. iOS中微信语音动画