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

    })

原文地址:https://www.cnblogs.com/randy619/p/11687835.html