微信小程序使用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 相关文章推荐
javascript 禁止复制网页
Jun 11 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
javascript中Number的方法小结
Nov 21 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
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
长波有什么东西
2021/03/01 无线电
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
文字幻灯片
2006/06/26 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
Python中的filter()函数的用法
2015/04/27 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
使用python模拟高斯分布例子
2019/12/09 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
幼儿园大班教师个人总结
2015/02/05 职场文书
任命书怎么写
2015/03/02 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js