[小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作。
附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html
本次将通过小程序audio的 poster、name、author、src、id、controls 属性,以及相关api:wx.createAudioContext 的使用,来制作一个简单的音频播放控制页面
poster属性:默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
name属性:默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
author属性:默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
src属性:要播放音频的资源地址
id属性:audio 组件的唯一标识符
controls属性:是否显示默认控件(类似控制音乐播放器的框架,如下图顶部)
那么,如何利用微信小程序audio音频播放组件,制作一个简单的音频播放控制页面?
接着打开 app.json,如下图添加 "pages/audio/audio", 写入该页面路径,确保能够访问。写入之后,audio文件会生成js/json/wxml等空白配置文件
// audio.js Page({ data: { poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000', name: '此时此刻', author: '许巍', src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46', }, onReady: function (e) { // 使用 wx.createAudioContext 获取 audio 上下文 context this.audioCtx = wx.createAudioContext('myAudio') }, audioPlay: function () { this.audioCtx.play() }, audioPause: function () { this.audioCtx.pause() }, audio14: function () { ) }, audioStart: function () { ) } })
[小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext的更多相关文章
- [小程序开发] 微信小程序内嵌网页web-view开发教程
为了便于开发者灵活配置小程序,微信小程序开放了内嵌网页能力.这意味着小程序的内容不再局限于pages和large,我们可以借助内嵌网页丰富小程序的内容.下面附上详细的开发教程(含视频操作以及注意事项) ...
- 小程序开发-微信小程序开发入门
分享一个微信小程序开发的基本流程,仅供参考. 第一步:注册微信小程序公众号,注册成功后,登录微信公众号管理后台,等待下一步操作. 第二步:进入微信小程序的后台后,下载微信内置的微信小程序开发者工具,以 ...
- 微信小程序开发——微信小程序下拉刷新真机无法弹回
开发工具中下拉之后页面回弹有一定的延迟,这个时间也有点久.真机测试,下拉后连回弹都没有,这个问题要解决,就得在下拉函数里加上停止下拉刷新的API,如下: /** * 下拉刷新 */ onPullDow ...
- 如何用TypeScript开发微信小程序
微信小程序来了!这个号称干掉传统app的玩意儿虽然目前处于内测阶段,不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了. 工具和文档可以参考官方文档:https://mp.weixin ...
- 关于开发微信小程序后端linux使用xampp配置https
关于开发微信小程序后端linux使用xampp配置https 背景 由于最近开发微信小程序,前后端交互需要使用https协议,故需要配置https服务 服务器环境 服务器系统 ubuntu 环境 xa ...
- 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等
在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 使用mpvue开发微信小程序
更多内容请查看 我的新博客 地址 : 前言 16年小程序刚出来的时候,就准备花点时间去学学.无奈现实中手上项目太多,一个接着一个,而且也没有开发小程序的需求,所以就一拖再拖. 直到上周,终于有一个小程 ...
随机推荐
- 唐纳德 高德纳给年轻人的建议 Donald Knuth - My advice to young people
From: Donald Knuth - My advice to young people (93/97) 译者: 李秋豪 原文 Donald Knuth (b. 1938), American c ...
- 【HTML】HTML基础知识
<!DOCTYPE html>表示HTML5文档申明,不区别大小写,通常这么写. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 ...
- 【ANT】创建删除目录,复制移动重命名文件
一.创建目录: <?xml version="1.0"?> <project default="test_mkdir"> <tar ...
- iOS开发富文本制作 图片和文字/NSMutableParagraphStyle/NSMutableAttributedString
/NSMutableParagraphStyle/NSMutableAttributedString 组合使 NSString * titlestr=@"日产GT-R"; NSMu ...
- bzoj 4819: [Sdoi2017]新生舞会
Description 学校组织了一次新生舞会,Cathy作为经验丰富的老学姐,负责为同学们安排舞伴.有n个男生和n个女生参加舞会 买一个男生和一个女生一起跳舞,互为舞伴.Cathy收集了这些同学之间 ...
- avro 1.8.2 (js)
5月15日发布的avro 1.8.2 已经包含了js版代码. 清华大学镜像地址: https://mirrors.tuna.tsinghua.edu.cn/apache/avro/avro-1.8.2 ...
- Web API系列之二WebApi基础框架搭建
本文主要介绍如何搭建一个WebApi的项目.关于如何搭建WebApi的方式一共有两种: 一.通过vs直接新建一个WebApi的项目,步骤如下: 第一步: 新建一个空的Web应用程序,可以理解为作为We ...
- Java订单号生成,唯一订单号(日均千万级别不重复)
Java订单号生成,唯一订单号 相信大家都可以搜索到很多的订单的生成方式,不懂的直接百度.. 1.订单号需要具备以下几个特点. 1.1 全站唯一性. 1.2 最好可读性. 1.3 随机性,不能重复,同 ...
- 洛谷 P1485 火枪打怪
题目描述 LXL进入到了一片丛林,结果他发现有n只怪物排成一排站在他面前.LXL有一杆火枪能对付这些怪物.他知道从左至右数第i只怪物的血量是mi.现在LXL可以将一些子弹射向某个怪物.LXL可以控制他 ...
- Java求循环节长度
两个整数做除法,有时会产生循环小数,其循环部分称为:循环节.比如,11/13=6=>0.846153846153..... 其循环节为[846153] 共有6位.下面的方法,可以求出循环节的长 ...