微信小程序使用audio组件播放音乐功能示例【附源码下载】


Posted in Javascript onDecember 08, 2017

本文实例讲述了微信小程序使用audio组件播放音乐功能。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序使用audio组件播放音乐功能示例【附源码下载】

2、关键代码

① index.wxml

<audio src="{{audioSrc}}" poster="{{audioPoster}}" name="{{audioName}}" author="{{audioAuthor}}" controls></audio>

② index.js

Page({
 data: {
   audioPoster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
   audioName: '此时此刻',
   audioAuthor: '许巍',
   audioSrc: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
 }
})

3、源代码点击此处本站下载

更多audio组件详细用法说明可参考官网:https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html#audio

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
Dom操作之兼容技巧分享
Sep 20 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
js断点调试心得分享(必看篇)
Dec 08 #Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 #Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 #Javascript
微信小程序实现下载进度条的方法
Dec 08 #Javascript
js断点调试经验分享
Dec 08 #Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 #Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 #Javascript
You might like
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
PHP中session变量的销毁
2014/02/27 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
validator验证控件使用代码
2010/11/23 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
中职应届生会计求职信
2013/10/23 职场文书
旷课检讨书2000字
2014/01/14 职场文书
股东合作协议书
2014/09/12 职场文书
学校重阳节活动总结
2015/03/24 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Python装饰器详细介绍
2022/03/25 Python
apache ftpserver搭建ftp服务器
2022/05/20 Servers
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python