语音聊天遇到的问题

---

前言

在使用angularJs框架和nodeJs的socket模块实现语音聊天时，发现使用ng-repeat循环audio元素后，audio元素不能正常启动。

一.使用MutationObserver监听元素（不能解决）

思路：使用MutationObserver对象监听ng-repeat对象，在对象子节点改变时扫描对象是否是audio元素。

问题：在启动页面后，报错。有ng-repeat属性元素不能被监听，返回错误该元素不是Node。

二.以为是ng-repeat在音频文件在没有引用前就被渲染

对ng-repeat对象进行监控

//当循环结束后执行
app.directive('onFinishRenderFilters', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function () {
          scope.$emit('ngRepeatFinished');
        });
      }
    }
  };
});

在ng-repeat对象后加上on-finish-render-filters属性,使用$scope.on监听该事件

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    	..........	
})

还是解决不了问题，结果发现是angularJs不支持audio元素

三.使用filter

在拿到文件路径后使用filter表明该URL为资源

.filter('trustUrl',function($sce){
        return function (input) {
            return $sce.trustAsResourceUrl(input);
        }
    })

audio元素为

<audio ng-src="{{ url | trustUrl }}" id="{{ id }}"></audio>

成功解决不能播放问题

四.在点击对方发送过来的语音时没反应

原因是class引用了外部css文件，将css样式写入到本体文件中后正常

五.blob对象发送到nodejs后端后，数据类型显示为Buffer

第五步将buffer数据流直接使用fs.writeFile方法（filepath，buffer，回调函数）保存成mp3文件

然后将路径保存到消息数据中

前端拿到消息数据后，因为在服务端设置了

app.use('/public', express.static(__dirname + '/public'));

设置静态代码目录，此文件夹中的所有文件都可见，可以直接访问到语音文件

同样的方法拿到url后使用