微信小程序开发实战（14）：音频组件（audio）

骑猪看日落 2023-03-01 11:58 16阅读 0赞

\-----------支持作者请转发本文-----------

audio是用于播放在线音频的组件，该组件默认会带一个控制面板，用于控制音频的播放和暂停，以及显示音频作者、音频名称和当前播放时间信息。audio组件必须设置的属性是src，该属性用于指定音频文件的地址（通常为网址），如果要想让audio组件显示控制面板，需要设置controls属性值为true。该属性的默认值是true，但必须指定该属性，如果不添加该属性，仍然不会显示控制面板。下面是一个使用audio组件简单的例子。

使用该布局后，会显示如图1所示的效果。

![format_png][]

图1  audio组件的控制面板

点击播放按钮即可播放音乐，再次点击即可停止播放。

audio组件还有如下3个比较常用的属性。

*  author：音频作者的名字
 *  name：音频名字
 *  poster：音频对应封面图像的地址
    
    下面的布局文件设置了这3个属性。

显示的效果如图2所示。

![format_png 1][]

图2  显示相关信息的audio组件

audio组件还有一些事件可以设置，最常用的是bindplay和bindpause事件，其中播放音频时触发bindplay，暂停音频时触发bindpause。下面的布局代码演示了这两个属性。

paused和audioPlayed方法的代码如下：

audioPlayed: function(e) {
       console.log('audio is played')
    },
    paused:function(e)
    {
       console.log('audio is paused')
    }

当播放和暂停音频时，会在Console中输出如图3所示的日志信息。

![format_png 2][]

图3  输出播放和暂停日志信息

注意：audio组件理论上是可以播放本地音频文件的，不过不能直接指定操作系统（Windows或macOS）的本地路径。在下一节介绍的video组件，可以使用wx.chooseVideo方法选择视频文件，不过该方法返回的路径是以wxfile开头的临时文件路径，而目前还没有提供wx.chooseAudio方法，所以暂时无法使用本地音频文件路径。

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 3][]

关注  极客起源  公众号，获得更多免费技术视频和文章。

![format_png 4][]

[format_png]: /images/20230208/c7f765b3250442228f1001f4c48210f8.png
[format_png 1]: /images/20230208/6468948ce3c44e7ba0a60164ad346917.png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9VT2ljQmljZDl4dG4wV3JJcncyRmliZ2pPN25pYkdVVzI3MFlxRE42WUFpYnpoaWI2V2NjV1paMmlidDdBOExINGJ3R2VDTjIxd2s4em1OaWJRQ2VtT1BJYlEwYkNRLzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9VT2ljQmljZDl4dG4yVnQyZ1Fzem5oa0U4aWFkRkhOUDIxVk5GTmR2MHJjRmljOXE0MmRpYmliR3h5MWlhY3VENkgzMDc0NlhMUnpwbmVldXlUSkFNZTV2eTJSZkEvNjQw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9VT2ljQmljZDl4dG4yVTN6Z0ppYzBiQ2JJeDVmNkpjSWljUUx0aWJyOVB0RDNiVWhrT3pLNkxqUENoeDAxb0VjSmdKNEVEMGJoN1R6TzJkaDBoNUxMWDY1Zk93LzY0MA?x-oss-process=image/format,png