微信小程序语音(A)发给别人(B),也能播放,是需要先把语音上传到自己的服务器上才可以
小程序语音(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-index="{{index}}" data-memberid="{{item.memberid}}">
按住回答
</button>
Js:
定义公用语音包组件
const recorderManager = wx.getRecorderManager();
const innerAudioContext = wx.createInnerAudioContext();
//开始录音的时候
start: function() {
const options = {
duration: 10000, //指定录音的时长,单位 ms
sampleRate: 16000, //采样率
numberOfChannels: 1, //录音通道数
encodeBitRate: 96000, //编码码率
format: 'mp3', //音频格式,有效值 aac/mp3
frameSize: 50, //指定帧大小,单位 KB
}
//开始录音
recorderManager.start(options);
recorderManager.onStart(() => {
console.log('开始录音')
});
//错误回调
recorderManager.onError((res) => {
console.log(res);
})
},
//停止录音
stop: function(e) {
var that = this;
var memberid= e.currentTarget.dataset.memberid;
recorderManager.stop();
recorderManager.onStop((res) => {
var list = that.data.vediolist;
var start = this.data.start;
var end = e.timeStamp;
var seconds = (end % (1000 * 60)) / 1000;
var shijian = seconds - start;
//这里也能按照时间显示留言宽度,暂时没做
var src = res.tempFilePath; //语音临时文件
//先把语音上传到自己的服务器上才可以,然后把返回的语音放入数组存储,最后在一起存到数据库中的字段里
wx.uploadFile({
url: hcxcx.apiUrl.getuploadvedio,
filePath: src,
header: {
'content-type': 'multipart/form-data'
},
name: "files",
formData: {
user: 'tesdt'
},
success: function(res) {
if (res.statusCode == 200) {
var aa = {
src: res.data,
memberid: memberid
}
list.push(aa);
that.setData({
vediolist: list
})
} else {
wx.showToast({
title: res.body,
icon: 'none',
duration: 2000
});
}
},
fail: function(res) {
wx.showToast({
title: res.body,
icon: 'none',
duration: 2000
});
}
});
})
},
C#端
#region 小程序录音上传
/// <summary>
/// 小程序录音上传
/// </summary>
/// <param name="_"></param>
/// <returns></returns>
[HttpPost]
public ActionResult GetUploadVedio()
{
string ImgId = string.Empty;
string webRootPath = _hostingEnvironment.WebRootPath;
var hp = _accessor.HttpContext.Request.Form.Files[0];//和前面input的name决定这个参数
string filemd5key = Guid.NewGuid().ToString("N");
try
{
var datetimename = DateTime.Now.ToString("yyyyMMdd");
var filedic = "ResourceTemp/Vedio/" + datetimename;
string filePath = webRootPath + "\\ResourceTemp\\Vedio\\" + datetimename;
//图片默认保存路径和文件路径是不一样的
//保存文件到层级目录下
if (!Directory.Exists(filePath))
{
Directory.CreateDirectory(filePath);
}
filePath = filePath + "\\" + filemd5key + Path.GetExtension(hp.FileName);
using (FileStream fs = System.IO.File.Create(filePath))
{
hp.CopyTo(fs);
fs.Flush();
}
byte[] buffer = null;
using (FileStream fs = new FileStream(filePath, FileMode.Open))
{
buffer = new byte[fs.Length];
fs.Read(buffer, 0, buffer.Length);
}
var url = ConfigUtil.GetStr("ApiDomain");
if (!url.Contains("http"))
{
url = "http://" + url;
}
url = url + "/";
ImgId = url + filedic + "/" + filemd5key + Path.GetExtension(hp.FileName);
}
catch (Exception ex)
{
NlogUtil.wlog("GetUploadVedio", "小程序录音上传错误信息:" + ex.Message);
}
return Content(ImgId);
}
#endregion
B端
Wxml:
<view class="yuyin" bindtap="vedioplay" data-vediosrc='{{vediosrc}}'>
<image src='./../../../centent/img/yuyinshuru.png' class="yuyin_img"></image>
</view>
Js
const innerAudioContext = wx.createInnerAudioContext();
vedioplay: function(e) {
let that = this;
var src = e.currentTarget.dataset.vediosrc;
innerAudioContext.autoplay = true;
innerAudioContext.src = src;
innerAudioContext.onPlay(() => {
console.log('历史记录播放');
})
innerAudioContext.obeyMuteSwitch = false
innerAudioContext.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
}
微信小程序语音(A)发给别人(B),也能播放,是需要先把语音上传到自己的服务器上才可以的更多相关文章
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序开发初体验--教你开发小程序
微信小程序 微信小程序面世以来受到的关注颇多,直到最近我才动手尝试进行了小程序的开发,总体上感觉还是不错的,有一点不适应的就是要摆脱Web APP开发对DOM的操作.在这里我就把我是如何利用API开发 ...
- 微信小程序开发带来的思考
若无小程序开发经验,可先阅读 玩转微信小程序 一文. 微信小程序正式上线已有几周时间,相信它的开发模式你已烂熟于胸,可能你也有所疑问,我竟能用 web 语言开发出如此流畅的几乎原生体验的应用.可能你又 ...
- [干货教程]仿网易云课堂微信小程序开发实战经验
本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发.目前已上线的“哎咆课堂”微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要技术点:微信登录.微信支付.微信小程序F ...
- 微信小程序开发环境搭建
关注,QQ群,微信应用号社区 511389428 微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个 ...
- 如何一键式搭建微信小程序
有了微信小程序,对你到底意味着什么? 对于用户来说,再也不用担心手机的内存不够用了!一个小程序只有1M,随便卸载一个App,就能安装很多小程序! 对于老板来说,你不再需要花费数十万来去请外包公司帮你去 ...
- 微信小程序“满月”:尝鲜之后你还用过它吗?
距离 2017 年 1 月 9 日微信小程序上线,整整过去了一个月时间.和互联网时代每天出现的众多新鲜事物相似,小程序甫一诞生,立即占据了各大科技媒体网站头屏并引起社交圈的兴奋讨论.由于背靠微信,纷纷 ...
随机推荐
- idea提交项目到码云
1.安装Git 2.在码云上创建项目 3.在IDEA提交项目到码云
- Plastic Sprayer Manufacturer - How Does The Sprayer Work?
The Plastic Sprayers Manufacturer stated that the sprayer is a very useful type of machine and a g ...
- selenium 参数设置-window.navigator.webdriver
selenium 参数设置 selenium启动chrome基本上与真实环境类似,但有一些变量还是不一样,需要注意. 有些网站通过这些参数识别爬虫. window.navigator.webdrive ...
- PaperReading20200227
CanChen ggchen@mail.ustc.edu.cn Neural Predictor for Neural Architecture Search Motivation: Curren ...
- linux 服务器优化 --TIME_WAIT 问题
linux 服务器优化 --TIME_WAIT 问题: 问题现象: 1.外部机器不能正常连接SSH 2.内向外不能够正常的ping通过,域名也不能正常解析. 通过一些命令,查看服务器TIME_WAIT ...
- ProgressBarForm 进度条
ProgressBarForm public partial class ProgressBarForm : Form { private Panel panel1 = new System.Wind ...
- 【转】android之在activity中控制另一个activity的UI更新_如何在activity之间传递handler
来自:http://blog.csdn.net/jason0539/article/details/18055259 遇到一个问题,需要在一个activity中控制另一个acitivity做一些更新, ...
- Linux centosVMware shell中的函数、shell中的数组、
一.shell中的函数 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段代码时直接调用这个小单元的名字即可. 格式: function _name() { command ...
- Eth合约攻击
前言 Ethernaut是一个类似于CTF的智能合约平台,集成了不少的智能合约相关的安全问题,这对于安全审计人员来说是一个很不错的学习平台,本篇文章将通过该平台来学习智能合约相关的各种安全问题,由于关 ...
- php后门拿下当前目录
Weevely是一个模拟类似telnet的连接的隐形PHP网页shell.它是Web应用程序后期开发的必备工具,可以作为隐形后门程序,也可以作为一个web外壳来管理合法的Web帐户,甚至可以免费托管. ...