微信小程序开发实战(14):音频组件(audio)
时间:2022-07-22
本文章向大家介绍微信小程序开发实战(14):音频组件(audio),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
-----------支持作者请转发本文-----------
audio是用于播放在线音频的组件,该组件默认会带一个控制面板,用于控制音频的播放和暂停,以及显示音频作者、音频名称和当前播放时间信息。audio组件必须设置的属性是src,该属性用于指定音频文件的地址(通常为网址),如果要想让audio组件显示控制面板,需要设置controls属性值为true。该属性的默认值是true,但必须指定该属性,如果不添加该属性,仍然不会显示控制面板。下面是一个使用audio组件简单的例子。
<audio src="http://5.1015600.com/2014/ring/000/118/28b0e17cfab0136677648b39cb8b7fbc.mp3" controls/>
使用该布局后,会显示如图1所示的效果。
图1 audio组件的控制面板
点击播放按钮即可播放音乐,再次点击即可停止播放。
audio组件还有如下3个比较常用的属性。
- author:音频作者的名字
- name:音频名字
- poster:音频对应封面图像的地址 下面的布局文件设置了这3个属性。
<audio poster="http://geekori.cn/img/weixin_code.png" author="李宁" name="笑傲江湖" src="http://5.1015600.com/2014/ring/000/118/28b0e17cfab0136677648b39cb8b7fbc.mp3" controls/>
显示的效果如图2所示。
图2 显示相关信息的audio组件
audio组件还有一些事件可以设置,最常用的是bindplay和bindpause事件,其中播放音频时触发bindplay,暂停音频时触发bindpause。下面的布局代码演示了这两个属性。
<audio bindpause="paused" bindplay="audioPlayed"
poster="http://geekori.cn/img/weixin_code.png" author="李宁" name="笑傲江湖" src="http://5.1015600.com/2014/ring/000/118/28b0e17cfab0136677648b39cb8b7fbc.mp3" controls/>
paused和audioPlayed方法的代码如下:
audioPlayed: function(e) {
console.log('audio is played')
},
paused:function(e)
{
console.log('audio is paused')
}
当播放和暂停音频时,会在Console中输出如图3所示的日志信息。
图3 输出播放和暂停日志信息
注意:audio组件理论上是可以播放本地音频文件的,不过不能直接指定操作系统(Windows或macOS)的本地路径。在下一节介绍的video组件,可以使用wx.chooseVideo方法选择视频文件,不过该方法返回的路径是以wxfile开头的临时文件路径,而目前还没有提供wx.chooseAudio方法,所以暂时无法使用本地音频文件路径。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ThreadLocal与Java引用类型(文末含福利)
- GitLab 12 跨版本 13 升级
- 打破你的认知!Java空指针居然还能这样玩,90%人不知道…
- Android 原生 SQLite 数据库的一次封装实践
- Window常用账号密码修改(Git)
- 高通AI研究院|高效网络设计|结构化卷积分解
- tomcat调优 tomcat配置优化
- error: PyThreadState {aka struct _ts} has no member named exc_type
- Python创建目录文件夹
- python 按顺序读文件夹下面的文件
- python剪切文件
- 一个hashCode问题的追问,差点让我陷入无底洞
- 【JAVA基础&高级】 面向对象篇
- MySQL-InnoDb行格式与数据页结构 Krains 2020-08-08
- 《自然语言处理实战入门》 ---- 第4课 :中文分词原理及相关组件简介 之 汉语分词领域主要分词算法、组件、服务(上)...