首页 > 其他分享 >js 本地录音,保存文件

js 本地录音,保存文件

时间:2023-06-30 11:57:13浏览次数:50  
标签:mediaRecorder console stop 录音 js link 本地 chunks const

<div>
    <span onclick="start()">开始录音</span>
    <span onclick="stop()">结束录音</span>
  </div>

 <script>
    const constraints = { audio: true };
    var mediaRecorder = null;
    function start ( ) {
      var chunks = [];
      console.log("start")
       navigator.mediaDevices.getUserMedia(constraints)
      .then(stream => {
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.addEventListener('dataavailable', event => {
          chunks.push(event.data);
        });

        mediaRecorder.addEventListener('stop', () => {
          const blob = new Blob(chunks, { type: 'audio/wav' });
          const url = URL.createObjectURL(blob);
          console.log(blob, url)
          const link = document.createElement('a');

          link.href = url;
          link.download = 'recording.wav';
          document.body.appendChild(link);
          link.click();
        });
        mediaRecorder.start();
      })
      .catch(err => {
        console.error(err);
      });
    }
    function stop ( ) {
      mediaRecorder.stop();  
      console.log("stop" ,mediaRecorder)
    }
  </script>

 

标签:mediaRecorder,console,stop,录音,js,link,本地,chunks,const
From: https://www.cnblogs.com/guozhongbo/p/17516259.html

相关文章

  • js中的解构赋值
    JavaScript的解构赋值语句是一种方便的语法,用于从数组或对象中提取值,并将它们赋给变量。它可以让你以一种简洁的方式从复杂的数据结构中提取数据。数组的解构赋值例如,假设有一个数组[1,2,3],你可以使用解构赋值语句将数组中的值分别赋给变量:const[a,b,c]=[1,2,3];......
  • JS解密为何会受到广大站长的欢迎
    要了解JS解密为何会受到广大站长的欢迎,首先我们得从JS加密这块说起,为了保护自己的代码不被复制,所以大部分程序员都会对自己的代码进行各种加密,这个时候JS解密就成为了必不可少的工具了。在了解JS解密之前一定要熟悉JS加密的原理,这样解密起来也就事半功倍了。常用的js加密有哪些Java......
  • uniapp 引入非模块化js
    uniapp开发的H5,引入第三方的非模块化.js文件,如self.js,就是纯js文件,没有module.exports暴露出来成为一个对象,这种放在common文件夹下,引入会提示找不到,这时候应该把该self.js放在static文件夹下,uniapp发行H5时static文件下的内容不编译,在并在入口.html文件中引入全局js,在.vue页......
  • jquery是什么?有什么用,跟js的关系
    #jquery是什么?有什么用,跟js的关系jQuery就是一个快速、简介的js库,把一些常用的方法写到一个单独的js文件,使用的时候直接引用这个js文件,其设计宗旨是倡导写更少的代码,做更多的事情j就是js,Query就是查询;意思就是查询js,把js的DOM做了封装,我们就可以快速的查询使用里面的功能jQue......
  • Handlebars.js 模板引擎
    介绍Handlebars 是JavaScript一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-lesstemplate"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译,这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导......
  • Java解析json数据(fastjson2)
    Json数据JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它以易于阅读和编写的方式来表示结构化数据,常用于在不同系统之间进行数据交互和传输。JSON使用键值对的方式来组织数据,具有以下几个特点:具有简洁的语法:JSON使用了人类可读的文本格式,易于理解和编写。支持......
  • Three.js教程:threejs语法总结
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生threejs语法总结本节课从JavaScript面向对象语法的角度,给大家总结下threejsAPI的使用习惯,这样方便大家更好的使用threejsAPI。Three.js语法总结:类(构造函数)Three.js提供了各种各样的类(构造函数),通过ne......
  • bootstrap本地
    bootstrap4,把cdn换成本地的文件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport&qu......
  • Nodejs模块化
    Nodejs模块化ECMAScript标准的缺陷没有模块系统标准库较少没有标准接口缺乏管理系统如果程序设计的规模达到了一定程度,则必须对其进行模块化,模块化可以有多种形式,但至少应该提供能够将代码分割为多个源文件的机制。CommonJS的模块功能可以帮我们解决该问题。Nodejs实现......
  • js遇到的小问题
    js笔记apollo.is_execute=apollo.is_execute?1:0;把true或者false转化为1或者0或者有值的时候是1,没有值的时候是0true转化为1,为false的0!db.execution_condition判断为空或者为undefind......