微信小程序开发之——录音播放及文件上传下载-示例(2)

一概述

开始播放和暂停播放按钮，演示音频的播放和暂停功能
开始播放时，先下载服务器上的文件(1.mp3)，然后进行播放
录音、停止、回放按钮，演示录音API的相关功能
上传按钮将录音文件上传到后台htdocs文件夹下

二后台服务器的开启

2.1 后台服务器说明

说明：

upfile：点击上传按钮后，将文件上传到此文件夹下
1.mp3：点击开始播放，下载1.mp3文件，然后播放

2.2 启动服务器

node index.js

三小程序示例

3.1 布局文件(index.wxml)

<view class="btn-rows"><button class="btn" bindtap="play" size="mini">开始播放</button><button class="btn" bindtap="pause" size="mini">暂停播放</button>
</view><view class="song">此处放置要播放的内容   此处放置要播放的内容   此处放置要播放的内容
</view><view class="btn-rows"><!-- 录音record()函数 --><button class="btn" bindtap="record" size="mini">录音</button><!-- 停止stop()函数 --><button class="btn" bindtap="stop" size="mini">停止</button><!-- 回放playback()函数 --><button class="btn" bindtap="playback" size="mini">回放</button><!-- 上传upload()函数 --><button class="btn" bindtap="upload" size="mini">上传</button>
</view>

3.2 样式文件(index.wxss)

page{width: 100%;padding: 0rpx 20rpx 10rpx 20rpx;box-sizing: border-box;
}
.btn-rows{display: flex;flex-direction: row;
}
.song{font-size: 32rpx;margin: 10rpx;
}
.btn{flex: 1;margin: 5rpx;background: #eeeeee;
}

3.3 逻辑文件(index.js)

//var tempFilePath = null
var tempFilePath = '/res/1.mp3' //模拟时使用此地址
var audioCtx = wx.createInnerAudioContext()
var rec = wx.getRecorderManager()
rec.onStop(res => {tempFilePath = res.tempFilePathconsole.log('结束录音' + tempFilePath)
})Page({//开始录音record: function () {rec.start()console.log('开始录音')},//停止录音stop: function () {rec.stop()},//回放录音playback: function () {audioCtx.src = tempFilePathaudioCtx.play()},//上传录音upload: function () {if (!tempFilePath) {wx.showToast({title: '还没有录音哦'})return}wx.uploadFile({filePath: tempFilePath,name: 'file',url: 'http://localhost:3000/upload', //服务器地址success: res => {console.log('文件上传成功' + res)},fail: res => {console.log('文件上传失败', res)}})},//播放文章play: function () {wx.showLoading({title: '音频下载中',})//从服务器中，把音频下载到本地wx.downloadFile({url: 'http://localhost:3000/1.mp3', // 服务器资源地址success: res => {//下载完成，播放音频console.log('开始播放')audioCtx.src = res.tempFilePathaudioCtx.play()wx.hideLoading()},fail: res => {wx.hideLoading()wx.showToast({title: '出错了',})}})},//暂停/继续播放pause: function () {if (audioCtx.pause) {audioCtx.play()} else {audioCtx.pause()}}
})

说明：

使用录音时，请使用真机，本文演示使用模拟器
真机时，tempFilePath为null，本文演示使用固定路径/res/1.mp3（请确保有此文件）

3.4 效果图(点击上传，文件上传到upload文件夹)

四参考代码

参考代码

微信小程序开发之——录音播放及文件上传下载-示例(2)相关推荐

微信小程序开发之——录音播放及文件上传下载-理论(1)
一概述小程序录制音频相关的API--recorderManager 小程序播放音频相关的API--InnerAudioContext 文件的上传相关API--wx.uploadFile 文件的下载 ...
微信小程序之使用vant-3组件Uploader文件上传
效果图: 微信小程序之使用vant-3组件Uploader文件上传 1.把vant的weapp包加进来 2.在app.json文件里面"usingComponents"加载进来才能 ...
微信小程序 - 超详细 “纯前端“ 将文件上传到阿里云 OSS，最新阿里云 OSS 直传音视频、图片、word、excel、ppt、office 文档（全程无需后端，前端文件直传阿里云oss服务器）
前言网上的教程乱七八糟却文件少代码(并且没注释),而且都已经很老了,对于新手来说真的无从下手. 本文站在新手小白的角度,实现微信小程序开发中,"前端直传" 上传文件到阿里云oss ...
微信小程序开发工具清除授权缓存/文件缓存/登录缓存等等
今天2.19.3.25 在开发微信小程序时,作为测试号想清除授权缓存,一直没有找到方法, 最后无意中看到了解决方法微信小程序开发工具清除授权缓存/文件缓存/登录缓存等等.完美解决
微信小程序多张图片和表单一起上传，验证表单及进度条的实现完整代码
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图: 完整代码:  ...
微信小程序开发之——音乐播放器-播放器(3.4)
一概述常用组件及API介绍播放器页面任务播放器页面任务数据准备音乐播放功能播放器页面二常用组件及API介绍 2.1 音频API 介绍微信小程序提供了播放音频的API,掌握这个API ...
微信小程序开发之——音乐播放器-音乐推荐
一概述常用组件介绍内容区域滚动轮播图功能按钮热门音乐二常用组件介绍 2.1 scroll-view 组件组件介绍 scroll-view组件用于实现可滚动视图区域一般来说,当页面的 ...
微信小程序+Django实现录音并在服务器上保存在指定文件夹
最近在做一个django后台的小程序开发,要用到小程序的录音功能,并且要把MP3文件保存在服务器上,今天就记录一下.推荐使用wx.getRecorderManager()方法,因为wx.stopRec ...
微信小程序实现录音格式为mp3，并上传到云开发环境
前言微信小程序中可以实现录音的主要有wx.startRecord()和wx.getRecorderManager(),其中wx.startRecord()从微信开发者工具基础库1.6后停止维护,开始 ...

微信小程序开发之——录音播放及文件上传下载-示例(2)

一概述

二后台服务器的开启

2.1 后台服务器说明

2.2 启动服务器

三小程序示例

3.1 布局文件(index.wxml)

3.2 样式文件(index.wxss)

3.3 逻辑文件(index.js)

3.4 效果图(点击上传，文件上传到upload文件夹)

四参考代码

微信小程序开发之——录音播放及文件上传下载-示例(2)相关推荐

最新文章

热门文章

微信小程序开发之——录音播放及文件上传下载-示例(2)

一 概述

二 后台服务器的开启

2.1 后台服务器说明

2.2 启动服务器

三 小程序示例

3.1 布局文件(index.wxml)

3.2 样式文件(index.wxss)

3.3 逻辑文件(index.js)

3.4 效果图(点击上传，文件上传到upload文件夹)

四 参考代码

微信小程序开发之——录音播放及文件上传下载-示例(2)相关推荐

最新文章

热门文章

一概述

二后台服务器的开启

三小程序示例

四参考代码