今天项目上涉及到了微信小程序播放音频功能,所以今天跟着一些教程做了个简单的播放器 1.实现思路 刚开始想着有没有现成的组件可以直接用,找到了微信的媒体组件 audio,奈何看着 1.6.0版本开始,该组件不再维护.就百度了一下,还好有另一种方式,使用 InnerAudioContext 来实现音频播放 2.界面预览    点击播放,播放按钮改变为暂停,播放后展示进度条,可 拖动/点击 进度条实现进度控制,可设置倍速 没有UI设计,所以界面很丑,界面后续完善,功能实现就行啦 3.界面代码 WXML

voice:function(){ var word = this.data.word; var src = 'https://--/'+word['word']+'.mp3'; console.log(src); this.innerAudioContext.autoplay = true; this.innerAudioContext.obeyMuteSwitch = true; this.innerAudioContext.src = src; // this.innerAudioCont

链接:https://blog.csdn.net/sourcemyx/article/details/79424004 像wx.onNetworkStatusChange(function(){})回调函数,如果放在普通的事件里,只要触发过一次,它就会一直监听着,而且该函数可以叠加监听次数!所以像这种函数一般放在onLoad函数中,只会触发一次的地方.

最近在写一个小程序的功能,需求是需要把用户的录音记录并上传到服务器,然后调用接口来实现播放功能. 翻阅不少资料都发现小程序对wx.startRecord()接口不在维护, 注意:1.6.0 版本开始,本接口不再维护.建议使用能力更强的 wx.getRecorderManager 接口 需要使用新的接口来处理,官方文档又不符合我的需求,所以就决定自己动手来实现一下录音播放功能. 因此我们使用的使用 wx.getRecorderManager 接口: 首先使用方法获取对象 const recorde

基础: wx.canIUse(string)    boolean wx.canIUse(string schema)   判断小程序的API,回调,参数,组件等是否在当前版本可用. 参数说明 ${API} 代表 API 名字 ${method} 代表调用方式,有效值为return, success, object, callback ${param} 代表参数或者返回值 ${options} 代表参数的可选值 ${component} 代表组件名字 ${attribute} 代表组件属性 ${

var app = getApp(), $ = require("../../utils/util.js"); const recorderManager = wx.getRecorderManager(); var interval; Page({ data: { listen: false, voicePath: "", minute: 0, second: 0, timeText: "00:00" }, onLoad: function(e

API 小程序提供了丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等. api调用格式: 1:wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数.当该事件触发时,会调用 CALLBACK 函数: wx.onXX(function(res) { //回调方法体; }) 2:如未特殊约定,其他 API 接口都接受一个OBJECT(在 { } 中定义)作为参数,OBJECT中可以指定success, fail,

1.在pages创建一个main文件夹2.在main文件夹下创建一个miain.js文件.添加代码: const constant = require('../../utils/constant.js') const app = getApp() const recorderManager = wx.getRecorderManager() const innerAudioContext = wx.createInnerAudioContext() Page({ data:{ money:"0.

爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function (e) { //获取当前内容的标识id,保存,方便进入查询 var id = e.currentTarget.id wx.setStorageSync('id', id) wx.navigateTo({ url: '../detail/detail', }); }, 在detail页面中的onLoa

点爆方式选择页面制作 在app.json中配置页面路径增加selectbao点爆方式选择,编译创建页面文件,点爆方式选择页面通过单选按钮组选择跳转到相应的点爆页面. <view class="the_header"> <text>选择点爆方式</text> <image src="/images/fencun.png"></image> </view> <view class="

点爆页面的实现与云函数和云存储的应用以及录音功能讲解 点爆页面制作 点爆页面主要提供文字记录和语音记录两种爆文记录方式,在本页面内输入文字或录入语音后选择心情点击点爆按钮,跳转到点爆方式选择界面. 首先,我们来实现页面布局,将文字记录和语音记录使用导航切换的方式放在一个页面内. 导航中在js中设置一个currentTab变量通过数据绑定判断显示文字记录和语音记录的切换,{{item}},使用列表渲染wx:for创建导航,同时通过data-index将当前项的的下标index记录,用于在js中控制

小程序推荐使用wx.createInnerAudioContext()创建的innerAudioContext,我们也通过这个接口创建音频.音频的长度可以通过属性获取: 但是,给innerAudioContext赋值src后就能获取吗,请看下面的例子: onLoad: function () { bgM = wx.createInnerAudioContext(); bgM.src = 'https://upyun.lesson.bbwansha.com/dub/user/2.mp3'; con

video组件提供的进度相关的监测只有 bindtimeupdate ,官方说明这个函数250ms触发一次,在开发者工具上基本符合,但在真机上每隔1秒触发一次.达不到我们要求的精度.对比下音频,wx.createInnerAudioContext()创建的innerAudioContext有个currentTime属性,但是video没有.关于bindtimeupdate 触发的问题,截图:1)开发者工具: 2)手机上: 我在官方论坛上提问了:https://developers.weixin.

小程序实现和h5一样的音乐图标一直旋转. 一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转) onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: , timingFunction: 'lin

奔着实用性的目的-测试孩子的认字量,开发了一个微信小程序-测字大王.上下班路上看书看了一个星期,代码前后共写一个星期.现在小程序已经对外开放,share下我的开发过程吧. 一 工具准备 首先先过一篇 微信开放文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ 然后安装微信开发者工具 这个简单,百度一堆安装流程可供参考. 但是在登陆微信开发者工具时碰到小问题,总是提示:系统代理不是安全,怎么也消不掉, 这个不是所有人都能碰到

先看实现效果: 利用百度UNIT预置的智能问答技能和微信小程序,实现语音问答机器人.这里主要介绍小程序功能开发实现过程,分享主要功能实现的子程序模块,都是干货! 想了解UNIT预置技能调用,请参看我之前的帖子:<UNIT搭建机器人助理> https://ai.baidu.com/forum/topic/show/953021 想了解微信小程序的开发过程,请参看我之前的帖子:<UNIT接入小程序>https://ai.baidu.com/forum/topic/show/953022

实现效果: 利用百度新闻摘要能力和微信小程序,快速抽取新闻摘要内容并进行语音播报,让AI做回新闻主播!本文主要介绍小程序功能开发实现过程,分享主要功能实现的子程序模块,都是干货哦!! 想了解python3下的技能调用,请参看我之前的帖子:<AI新闻主播为您读报> https://ai.baidu.com/forum/topic/show/953193 1 系统框架 这里用到的主要技术有:百度通用文字识别.语音合成.新闻摘要和微信小程序.小程序通过对上传新闻照片进行文字识别,将新闻内容由图片转换

小程序语音(A)发给别人(B),也能播放,是需要先把语音上传到自己的服务器上才可以. https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html A端: Wxml: <button wx:if="{{selected}}" bind:touchstart="start" bind:touchend="stop" data-in

微信小程序 注册 由于发文限制,请自行到微信公众平台注册 项目结构 project.config.json 配置文件(不需要动) app.json(用户配置) 路由pages window 整个程序样式 tabar底部设置 ..... app.js 入口程序 xxx.js app.js是入口程序,代表应用要做的事 通过路由切换到了index.js中 Page(options) data 属于页面的数据 this.data.xxx onLoad: 获取路由参数 , onLoad(options.x

原文地址:Android WebView 实现文件选择.拍照.录制视频.录音 | Stars-One的杂货小窝 Android中的WebView如果不进行相应的设置,H5页面的上传按钮是无法触发Android弹出文件选择框的,所以,需要进行以下的设置 原理说明 Webview通过setWebChromeClient()方法来设置一个WebChromeClient对象,里面有相关的方法处理,我们需要将其相关的方法处理即可实现对应的效果(如弹出对话框,权限申请或弹出文件选择) 我们想要实现文件选择,