首页 > 特效插件 > 视频音乐 >  js+html5录音插件Recorder.js正文

js+html5录音插件Recorder.js

特效介绍


Recorder.js是一款基于html5音频处理等新特性的录音插件,支持录制WAV等格式,支持到处录音文件等。当然,为了能使用此插件,必须要遵从下面的规则:
    1、必须在chrome浏览器,firfox、IE等不行。
    2、必须是线上环境,而且是https才可以。本地录制,会没有时长(虽然不会提示失败),而http会报错。
使用方法
1、引入recorder.js

2、将下面代码使用到您的项目中
  var audio_context;
  var recorder;

  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    recorder = new Recorder(input);
  }

  //开始录音,事件可以放在录音按钮上
  function startRecording(button) {
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
  }

  //停止录音,时间可以绑定到停止录音的按钮上
  function stopRecording(button) {
    recorder && recorder.stop();
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    createDownloadLink();
    recorder.clear();
  }

  //创建录音文件地址
  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      
      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
    });
  }

  window.onload = function init() {
    try {
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      
      audio_context = new AudioContext;
    } catch (e) {
      alert('No web audio support in this browser!');
    }
    
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
    });
  };

下载 提取码/密码:9zy8(点击复制密码) 预览