请选择 进入手机版 | 继续访问电脑版
123下一页
返回列表 发新帖

(四)环信 easeChat模块demo 发送语音

[复制链接]
Mr.ZhouHeng 发表于 2018-11-21 19:25:26
本帖最后由 Mr.ZhouHeng 于 2019-9-3 15:27 编辑


  1. //发送语音消息
  2. function fnEaseChatSendVoice(conversationId_, chatType_, path_, from_, to_, time_) {
  3.      var date = new Date();
  4.      var y = date.getFullYear();
  5.      var m = date.getMonth();
  6.      var d = date.getDate();
  7.      var h = date.getHours();
  8.      var mm = date.getMinutes();
  9.      var s = date.getSeconds();
  10.      // 根据发送人名和发送时间,合成的语音文件名
  11.      var displayName = from_ + "" + y + "" + m + "" + d + "" + h + "" + mm + "" + s;
  12.      var easeChat = api.require('easeChat');
  13.      easeChat.sendVoice({
  14.          conversationId: conversationId_,
  15.          chatType: chatType_,
  16.          length: time_,
  17.          path: path_,
  18.          displayName: displayName,
  19.          from: from_,
  20.          to: to_,
  21.          ext: {
  22.              isShow: false//增加一个状态主要为了点击播放语音的时候喇叭按钮变为动态gif喇叭
  23.          }
  24.      }, function(ret, err) {
  25.          if (ret) {
  26.              if (ret.status == true) {
  27.                  // 刷新一下首页列表消息
  28.                  fnGetAllConversations();
  29.                  // 向聊天消息追加一条消息
  30.                  api.execScript({
  31.                      name: 'chat',
  32.                      frameName: 'chat_frm',
  33.                      script: 'fnAddanew(' + JSON.stringify([ret.message]) + ',' + true + ');'
  34.                  });
  35.                  //将指定消息设置为已读
  36.                  fnMarkMessageAsRead(ret.message.conversationId, ret.message.chatType, ret.message.messageId);
  37.              } else {
  38.                  toast("APICloud环信DEMO:消息发送失败请稍后再试");
  39.              }
  40.          } else {
  41.              toast("APICloud环信DEMO:" + err.msg);
  42.          }
  43.      });
  44. }
复制代码



message_frm.html
  <div class="flex-con">
                        <div class="center-name">
                            {{lists.conversationId}}
                        </div>
                        <div class="center-body ellipsis-1">{{lists|fnType}}</div>
   </div>
  1.   // 显示转换
  2.                 fnType: function(message) {
  3.                     var types = message.latestMessage.body.type;
  4.                     //text:文本类型
  5.                     //image:图片类型
  6.                     //video:视频类型
  7.                     //location:位置类型
  8.                     //voice:语音类型
  9.                     //file:文件类型
  10.                     if (types == "text") {
  11.                         return message.latestMessage.body.text;
  12.                     }
  13.                     if (types == "voice") {
  14.                         return "[语音]";
  15.                     }
  16.                     if (types == "image") {
  17.                         return "[图片]";
  18.                     }
  19.                     if (types == "video") {
  20.                         return "[视频]";
  21.                     }
  22.                     if (types == "location") {
  23.                         return "[位置]";
  24.                     }
  25. }
复制代码


chat_frm.html

  1.   <div class="chat-inner flex-wrap">
  2.                 <!-- 消息发送状态 -->
  3.                 <div class="chat-status" v-if="chats.direction=='send'">
  4.                     <i class="iconfont icon-correct"></i>
  5.                 </div>
  6.                 <div class="chat-status" v-if="chats.direction=='send'&&chats.body.type=='voice'">
  7.                     <!-- 语音是否已读 -->
  8.                     <!-- <div class="badge" v-if="chats.isReadAcked==false"></div> -->
  9.                     <div class="times">{{chats.body.duration}}``</div>
  10.                 </div>
  11.                 <!-- 文本消息 -->
  12.                 <div class="chat-content" v-if="chats.body.type=='text'">
  13.                     <div class="chat-arrow"></div>
  14.                     <div class="body">{{chats.body.text}}</div>
  15.                 </div>
  16.                 <!-- 语音消息 -->
  17.                 <div class="chat-content" v-if="chats.body.type=='voice'" @click="fnPlayVoice(index,chats.body.localPath,chats.body.remotePath,chats.conversationId,chats.chatType,chats.messageId);">
  18.                     <div class="chat-arrow"></div>
  19.                     <div class="icon">
  20.                         <div class="iconhron" :class="{iconhrons:chats.ext.isShow==true}"></div>
  21.                     </div>
  22.                 </div>
  23.                 <div class="chat-status" v-if="chats.direction!='send'&&chats.body.type=='voice'">
  24.                     <!-- 语音是否已读 -->
  25.                     <div class="badge" v-if="chats.isReadAcked==false"></div>
  26.                     <div class="times">{{chats.body.duration}}``</div>
  27.                 </div>
  28.                 <!-- 消息发送状态 -->
  29.                 <div class="chat-status" v-if="chats.direction!='send'">
  30.                     <i class="iconfont icon-correct"></i>
  31.                 </div>
  32.             </div>
复制代码


点击播放录音
  1.   fnPlayVoice: function(index, localPath, remotePath, conversationid, type, messageid) {
  2.                     // console.log(this.chat[index].ext.isShow)
  3.                     // 判断是否是第一次点击播放录音去掉红色提示圆圈,
  4.                     // 设置为已读必须满足是接收消息,
  5.                     // 已经点击的无法在点击改变
  6.                     // (这个功能目前来说没有字段可以实现暂时放着)
  7.                     // if (this.chat[index].isReadAcked == false && this.chat[index].direction == "receive") {
  8.                     //     this.chat[index].isReadAcked = true;
  9.                     //     // 将指定消息设置为已读
  10.                     //     // fnMarkMessageAsRead(conversationid, type, messageid)
  11.                     //     return;
  12.                     // }
  13.                   //  此块安卓会出现问题,发送语音消息的时候,录音网络地址没有  
  14.                   //  所有你发送一次录音正确,
  15.                   //  在发送都会出现是前一次的录音
  16.                   //  这块录音建议发送到自己服务器上然后在播放录音
  17.                     if (remotePath != '') {
  18.                         api.download({
  19.                             url: remotePath,
  20.                             savePath: 'fs://easeChat_chat.amr',
  21.                             report: false,
  22.                             cache: true,
  23.                             allowResume: false
  24.                         }, function(ret, err) {
  25.                             if (ret.state == 1) {
  26.                               console.log(11111)
  27.                                 // 只打开点击的录音,其他的都关闭
  28.                                 for (var i = 0; i < window.ListVue.chat.length; i++) {
  29.                                     if (i == index) {
  30.                                         window.ListVue.chat[index].ext.isShow = true;
  31.                                         // // 播放语音
  32.                                         api.startPlay({
  33.                                             path: ret.savePath
  34.                                         }, function(ret, err) {
  35.                                             if (ret) {
  36.                                                 window.ListVue.chat[index].ext.isShow = false;
  37.                                                 //播放完以后自动停止
  38.                                                 api.stopPlay();
  39.                                             } else {
  40.                                                 toast("APICloud环信DEMO:" + JSON.stringify(err));
  41.                                             }
  42.                                         });
  43.                                     } else {
  44.                                         window.ListVue.chat[i].ext.isShow = false;
  45.                                     }
  46.                                 }
  47.                             } else {
  48.                                 tost("APICloud环信DEMO:" + JSON.stringify(ret));
  49.                             }
  50.                         });
  51.                         return;
  52.                     } else {
  53.                         console.log(2222)
  54.                         // 只打开点击的录音,其他的都关闭
  55.                         for (var i = 0; i < window.ListVue.chat.length; i++) {
  56.                             if (i == index) {
  57.                                 window.ListVue.chat[index].ext.isShow = true;
  58.                                 // // 播放语音
  59.                                 api.startPlay({
  60.                                     path: localPath
  61.                                 }, function(ret, err) {
  62.                                     if (ret) {
  63.                                         window.ListVue.chat[index].ext.isShow = false;
  64.                                         //播放完以后自动停止
  65.                                         api.stopPlay();
  66.                                     } else {
  67.                                         toast("APICloud环信DEMO:" + JSON.stringify(err));
  68.                                     }
  69.                                 });
  70.                             } else {
  71.                                 window.ListVue.chat[i].ext.isShow = false;
  72.                             }
  73.                         }
  74.                         return;
  75.                     }
  76.                     // console.log(index + "****localPath:" + localPath + "****remotePath:" + remotePath + "****" + conversationid + "****" + type + "****" + messageid)
  77.                 },
复制代码

  1.       //监听点击录音按钮功能、按下录音按钮
  2.         UIChatBox.addEventListener({
  3.             target: 'recordBtn',
  4.             name: 'press'
  5.         }, function(ret, err) {
  6.             if (ret) {
  7.                 // 显示浮动的录音状态
  8.                 window.ListVue.record = 1;
  9.                 // 打开震动
  10.                 api.notification({
  11.                     vibrate: [10, 50]
  12.                 });
  13.                 // 判断麦克风是否禁用
  14.                 var resultList = api.hasPermission({
  15.                     list: ['microphone']
  16.                 });
  17.                 if (resultList[0]['granted']) {
  18.                     fnOpenAudio();
  19.                     isShow = true; //暂停可以发送
  20.                 } else {
  21.                     api.alert({
  22.                         title: '麦克风没有准备好',
  23.                         msg: '请检查是否允许录音',
  24.                     }, function() {
  25.                         fnOpenAudio();
  26.                         isShow = true; //暂停可以发送
  27.                     });
  28.                 }
  29.             } else {
  30.                 toast("APICloud环信DEMO:" + JSON.stringify(err));
  31.             }
  32.         });

  33.         //监听点击录音按钮功能、松开录音按钮发送语音消息
  34.         UIChatBox.addEventListener({
  35.             target: 'recordBtn',
  36.             name: 'press_cancel'
  37.         }, function(ret, err) {
  38.             if (ret) {
  39.                 window.ListVue.record = 0;
  40.                 if (isShow) {
  41.                     fnStopsendAudio(); //暂停录音并且发送
  42.                     isShow = false; //回到初始状态
  43.                 }
  44.             } else {
  45.                 toast("APICloud环信DEMO:" + JSON.stringify(err));
  46.             }
  47.         });

  48.         //监听点击录音按钮功能、按下录音按钮后,从按钮移出
  49.         UIChatBox.addEventListener({
  50.             target: 'recordBtn',
  51.             name: 'move_out'
  52.         }, function(ret, err) {
  53.             if (ret) {
  54.                 window.ListVue.record = 1;
  55.                 window.ListVue.release = 1;
  56.                 isShow = false;
  57.             } else {
  58.                 toast("APICloud环信DEMO:" + JSON.stringify(err));
  59.             }
  60.         });

  61.         //监听点击录音按钮功能、按下录音按钮后,从按钮移出并松开按钮
  62.         UIChatBox.addEventListener({
  63.             target: 'recordBtn',
  64.             name: 'move_out_cancel'
  65.         }, function(ret, err) {
  66.             if (ret) {
  67.                 window.ListVue.record = 0;
  68.                 window.ListVue.release = 0;
  69.                 isShow = false; //暂停取消发送
  70.             } else {
  71.                 toast("APICloud环信DEMO:" + JSON.stringify(err));
  72.             }
  73.         });

  74.         //监听点击录音按钮功能、move_out 事件后,重新移入按钮区域
  75.         UIChatBox.addEventListener({
  76.             target: 'recordBtn',
  77.             name: 'move_in'
  78.         }, function(ret, err) {
  79.             if (ret) {
  80.                 window.ListVue.record = 1;
  81.                 window.ListVue.release = 0;
  82.                 isShow = true; //暂停取消发送
  83.             } else {
  84.                 toast("APICloud环信DEMO:" + JSON.stringify(err));
  85.             }
  86.         });
复制代码



  1. // 打开录音语音
  2.     function fnOpenAudio() {
  3.         api.startRecord({
  4.             path: 'fs://easeChat_chat.amr'
  5.         });
  6.     }

  7.     // 停止并且发送录音消息
  8.     function fnStopsendAudio() {
  9.         api.stopRecord(function(ret, err) {
  10.             if (ret) {
  11.                 if (ret.duration > 0) {
  12.                     //调取环信发送语音接口
  13.                     fnEaseChatSendVoice(api.pageParam.conversationid, api.pageParam.type, ret.path, $api.getStorage('user'), api.pageParam.conversationid, ret.duration);
  14.                 } else {
  15.                     toast('APICloud环信DEMO:录音时间太短了,请从新录音');
  16.                 }
  17.             } else {
  18.                 toast('APICloud环信DEMO:', JSON.stringify(err));
  19.             }
  20.         });
  21.     }
复制代码


关于安卓录音相机等等权限问题建议看下这个帖子!!Android平台targetSdkVersion设置及动态权限

本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X

20条回复

Mr.ZhouHeng 官方版主 12774Y币
本帖最后由 Mr.ZhouHeng 于 2018-11-23 16:20 编辑

待更新(源码都在总贴)
Teding 驾校小白 20Y币
新版本好像导致应用闪退了,我回退了一个版本就好了
Mr.ZhouHeng 官方版主 12774Y币
Teding 发表于 2018-11-22 18:57
新版本好像导致应用闪退了,我回退了一个版本就好了

我没发现闪退啊
Teding 驾校小白 20Y币

但是我们昨天确实是因为这个模块,找了一天,把1.0.6退回到1.0.5就好了
Mr.ZhouHeng 官方版主 12774Y币
Teding 发表于 2018-11-23 08:35
但是我们昨天确实是因为这个模块,找了一天,把1.0.6退回到1.0.5就好了

我用的的确是最新版本的  没发现闪退 你闪退你那个接口出现还是全部出现?
Tantanapps 驾校小白 0Y币
最新版本的
小小槑 实习司机 72Y币
求大佬demo
Mr.ZhouHeng 官方版主 12774Y币

总贴里面有源码 自己去总贴下载
$老B$ 驾校小白 0Y币
感谢分享
123下一页
您需要登录后才可以回帖 登录

本版积分规则