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

        })

  • 相关阅读:
    Vue_使用v-model指令写的简易计算器
    Vue_v-for的四种用法示例
    bs4_加载顺序
    Vue_自定义指令
    Vue_v-for中key的使用注意事项
    Vue_指令
    bs4_card(卡片)
    Vue_过滤器
    Vue_生命周期函数
    selenium 文件上传
  • 原文地址:https://www.cnblogs.com/randy619/p/11687835.html
Copyright © 2020-2023  润新知