小程序语音(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)
})
}