开发 | 微信小程序audio音频播放组件+api_wx.createAudioContext

gekylin 发布于2019-08-15 14:01 / 687人阅读

摘要：引言是微信小程序中的音频组件，可以轻松实现小程序中播放停止音频等自定义动作。

引言： audio是微信小程序中的音频组件，可以轻松实现小程序中播放/停止音频等自定义动作。

附上微信小程序audio组件的相关属性说明：
https://mp.weixin.qq.com/debu...

本次将通过小程序audio的 poster、name、author、src、id、controls 属性，以及相关api：wx.createAudioContext 的使用，来制作一个简单的音频播放控制页面

步骤一
打开微信开发者工具，创建小程序项目，选择新建的空白文件夹即可，工具为自动为你生成小程序必要文件！接着在 pages 下创建一个文件夹命名 audio

步骤二
接着打开 app.json，如下图添加 "pages/audio/audio", 写入该页面路径，确保能够访问。写入之后，audio文件会生成js/json/wxml等空白配置文件

步骤三
直接贴出代码了，audio.json 默认即可
audio.js (audio脚本文件)

// 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 () {  
    this.audioCtx.seek(14)  
  },  
  audioStart: function () {  
    this.audioCtx.seek(0)  
  }  
})

audio.wxml(audio页面结构文件)

audio.wxss(audio页面样式文件)

/* pages/audio/aduio.wxss */  
.button-style{   
    background-color: #eee;    
    border-radius: 8rpx;    
    margin: 20rpx;    
}

微信小程序audio音频播放组件的效果：

GPU云服务器云服务器微信小程序组件微信小程序免费开发微信小程序怎样开发微信小程序的开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/68461.html

微信小程序音频IOS无法播放问题总结

摘要：问题微信小程序，将文字转换为语音后，使用音频进行播放。在安卓手机下可以正常播放，在下不行。需要对接口的文本字符串参数进行编码比如哈哈哈哈哈哈哈哈哈没有做编码，直接上文本的，也会出现安卓行不行的情况。【问题】微信小程序，将文字转换为语音后，使用音频进行播放。在安卓手机下可以正常播放，在IOS下不行。【环境】微信小程序库版本2.3.0百度语音合成服务【解决方法】正确代码： //...

Soarkey 2019-08-23 12:39 评论0 收藏0
指尖一点歌声来--微信小程序之仿网易云音乐心得

摘要：为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。查文档发现，小程序中图片加载完成后，有一个加载完成事件。前者在微信客户端版本就不开始维护了，后者低版本需做兼容处理。目前还有一些功能暂未实现，会在以后继续完善项目，继续学习。为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。期间踩过了大把的坑，bug出现的难受和解决bug欢喜，一直是伴随我阶段性学习这个项目的心情。初步完成...

KitorinZero 2019-08-22 11:18 评论0 收藏0
微信小程序组件开发规范

摘要：小程序自定义组件开发规范一个小程序组件由个文件组成，分别是，本规范只关注组件的，其它自行查看官方文档。的变量可以分为以下种类型组件外部通过组件属性的方式传入内部的数据。小程序自定义组件开发规范一个小程序组件由4个文件组成，分别是wxml、wxss、json、js，本规范只关注组件的js，其它自行查看官方文档。在自定义组件的 js 文件中，需要使用 Compon...

null1145 2019-08-26 12:00 评论0 收藏0
300行代码写一个音乐播放器小程序

摘要：项目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代码，更多关于小程序的内容可见微信小程序开发文档小程序框架结构微信小程序的入口是根目录下的它们分别描述的小程序的主题逻辑和公共配置部分。刚进公司不久，因为公司部门年后业务拓展的关系，可能在年后会被分配到公司的微信公众号组做小程序相关的开发工作，因此写了个微信小程序wx-audio踩坑。目前还有一些功能没有写完：如返...

chenatu 2019-08-20 13:56 评论0 收藏0