环信im 发送语音

6 篇文章 1 订阅
<template>
  <div>
    <h1>{{tipMsg}}</h1>
     <button @click="onStartVoice">开始</button>
     <button @click="onEndVoice">结束</button>
     <button @click="onPlayAudio">播放</button>
     <div v-show="isFinished">
       <h2>Current voice player is:</h2>
       <audio id="audioVoice"
              controls
              autoplay></audio>
     </div>
   </div>
</template>

<script>
 // 录音插件
  import Recorder from "../../static/js/sdk.js";
  export default {
    data () {
      return {
        isVoice: false,
        isFinished: false,
        tipMsg: '录音',
        audio: "",
        recorder: new Recorder()
      }
    },
    mounted () { // 页面加载完调用
      this.$login.user = localStorage.getItem('patientNum')
      this.$conn.open(this.$login) // 登录环信
      this.$conn.listen({
        onOpened: function ( message ) { //连接成功回调 
          console.log('登录成功')
        }
      })
    },
   methods: {
       // 开始录音
      onStartVoice () {
        this.onStopAudio()
        this.isFinished = false;
        this.recorder.startRecord({
          success: res => {
            this.isVoice = true
          },
          error: e => {
            this.isVoice = false
            this.$toast(e)
          }
        });
      },
       // 结束录音
      onEndVoice () {
        this.isFinished = false;
        this.recorder.stopRecord({
          success: res => {
            this.isVoice = false
            //此处可以获取音频源文件(res),用于上传等操作
            // console.log('音频源文件', res)
            // var arr = WebIM.utils.parseDownloadResponse.call(WebIM.conn, res)
            // console.log(arr)
            
            // let files = new window.File([res], '文件名字', {type: 'audio/mp3'})
            // console.log('file', files)
    
            //  var obj = {
            //    url: arr,
            //    filename: '文件名字',
            //    filetype: 'mp3',
            //    data: files
            //  }
            //  console.log(obj)
            
            // var file = WebIM.utils.getFileUrl(obj);      // 将音频转化为二进制文件
            // console.log(file)
                  
            let taht = this
            var id = taht.$conn.getUniqueId(); // 生成本地消息id  
            var msg = new WebIM.message('audio', id); // 创建音频消息   
            console.log('音频源文件', res); // blob文件
            var input = new window.File([res], '录音文件', {type: 'audio/mp3'});  
            console.log('音频源input文件', input); // 转file对象
            var urlPath = window.URL.createObjectURL(input); // 生成blob链接
            console.log(urlPath)
            var file = {  // 伪造二进制对象
                url: urlPath,  
                filename: '录音',  
                filetype: 'mp3',  
                data: input  
            }  
            console.log(file);
            var allowType = {  
                'mp3': true,  
                'amr': true,  
                'wmv': true  
            };  
            file.filename = input.name || '';  
            var index = file.filename.lastIndexOf('.');  
            if(index != -1) {  
                file.filetype = file.filename.substring(index + 1).toLowerCase();  
            }  
            console.log('file', file);
            console.log('类型', file.filetype.toLowerCase());
            if (file.filetype.toLowerCase() in allowType) {
                var option = {
                    apiUrl: WebIM.config.apiURL,
                    file: file,						// 二进制对象
                    length: '3',                   // 音频文件时长,单位(s)
                    to: localStorage.getItem('userId'), // 接收消息对象
                    roomType: false,
                    onFileUploadError: function (e) {      // 消息上传失败
                        console.log("上传失败")
                    },
                    onFileUploadComplete: function () {   // 消息上传成功
                        console.log("上传成功")
                    },
                    success: function () {                // 消息发送成功
                        console.log("发送成功")
                    },
                    flashUpload: WebIM.flashUpload,
                    ext: {file_length: file.data.size}
                };
                console.log(option)
                msg.set(option);
                taht.$conn.send(msg.body);
                console.log(msg.body)
            }
          },
          error: e => {
            this.isVoice = false
          }
        });
      },
  
      // 播放录音
      onPlayAudio () {
        this.isVoice = false
        this.isFinished = true;
        this.audio = document.getElementById("audioVoice");
        this.recorder.play(this.audio);
      },
  
      // 停止播放录音
      onStopAudio () {
        this.recorder.clear(this.audio);
      }
    }
  }
</script>

<style>
</style>

录音插件:插件地址

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值