小程序语音(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),也能播放,是需要先把语音上传到自己的服务器上才可以的更多相关文章

  1. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  2. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  3. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  4. 微信小程序开发初体验--教你开发小程序

    微信小程序 微信小程序面世以来受到的关注颇多,直到最近我才动手尝试进行了小程序的开发,总体上感觉还是不错的,有一点不适应的就是要摆脱Web APP开发对DOM的操作.在这里我就把我是如何利用API开发 ...

  5. 微信小程序开发带来的思考

    若无小程序开发经验,可先阅读 玩转微信小程序 一文. 微信小程序正式上线已有几周时间,相信它的开发模式你已烂熟于胸,可能你也有所疑问,我竟能用 web 语言开发出如此流畅的几乎原生体验的应用.可能你又 ...

  6. [干货教程]仿网易云课堂微信小程序开发实战经验

    本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发.目前已上线的“哎咆课堂”微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要技术点:微信登录.微信支付.微信小程序F ...

  7. 微信小程序开发环境搭建

    关注,QQ群,微信应用号社区 511389428 微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个 ...

  8. 如何一键式搭建微信小程序

    有了微信小程序,对你到底意味着什么? 对于用户来说,再也不用担心手机的内存不够用了!一个小程序只有1M,随便卸载一个App,就能安装很多小程序! 对于老板来说,你不再需要花费数十万来去请外包公司帮你去 ...

  9. 微信小程序“满月”:尝鲜之后你还用过它吗?

    距离 2017 年 1 月 9 日微信小程序上线,整整过去了一个月时间.和互联网时代每天出现的众多新鲜事物相似,小程序甫一诞生,立即占据了各大科技媒体网站头屏并引起社交圈的兴奋讨论.由于背靠微信,纷纷 ...

随机推荐

  1. idea提交项目到码云

    1.安装Git 2.在码云上创建项目 3.在IDEA提交项目到码云

  2. 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 ...

  3. selenium 参数设置-window.navigator.webdriver

    selenium 参数设置 selenium启动chrome基本上与真实环境类似,但有一些变量还是不一样,需要注意. 有些网站通过这些参数识别爬虫. window.navigator.webdrive ...

  4. PaperReading20200227

    CanChen ggchen@mail.ustc.edu.cn   Neural Predictor for Neural Architecture Search Motivation: Curren ...

  5. linux 服务器优化 --TIME_WAIT 问题

    linux 服务器优化 --TIME_WAIT 问题: 问题现象: 1.外部机器不能正常连接SSH 2.内向外不能够正常的ping通过,域名也不能正常解析. 通过一些命令,查看服务器TIME_WAIT ...

  6. ProgressBarForm 进度条

    ProgressBarForm public partial class ProgressBarForm : Form { private Panel panel1 = new System.Wind ...

  7. 【转】android之在activity中控制另一个activity的UI更新_如何在activity之间传递handler

    来自:http://blog.csdn.net/jason0539/article/details/18055259 遇到一个问题,需要在一个activity中控制另一个acitivity做一些更新, ...

  8. Linux centosVMware shell中的函数、shell中的数组、

    一.shell中的函数 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段代码时直接调用这个小单元的名字即可. 格式: function _name() { command ...

  9. Eth合约攻击

    前言 Ethernaut是一个类似于CTF的智能合约平台,集成了不少的智能合约相关的安全问题,这对于安全审计人员来说是一个很不错的学习平台,本篇文章将通过该平台来学习智能合约相关的各种安全问题,由于关 ...

  10. php后门拿下当前目录

    Weevely是一个模拟类似telnet的连接的隐形PHP网页shell.它是Web应用程序后期开发的必备工具,可以作为隐形后门程序,也可以作为一个web外壳来管理合法的Web帐户,甚至可以免费托管. ...