微信小程序语音（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)

})

｝