首页 > 其他分享 >JS传wav文件给后台

JS传wav文件给后台

时间:2023-07-01 17:34:07浏览次数:40  
标签:mediaRecorder recordButton isRecording JS chunks let 后台 wav

<button id="recordButton">开始录制</button>
let recordButton = document.getElementById('recordButton');
            let mediaRecorder;  //媒体实例
            let chunks = [];//语音文件
            let isRecording = false;//是正在录制还是停止录制

            recordButton.addEventListener('click', () => {
                if (!isRecording) {
				    chunks = []; // 清空数组
                    navigator.mediaDevices.getUserMedia({ audio: true })
                        .then(stream => {
                            mediaRecorder = new MediaRecorder(stream);
                            mediaRecorder.start();

                            mediaRecorder.ondataavailable = (e) => {
                                chunks.push(e.data);
                            };

                            mediaRecorder.onstop = (e) => {
                                let blob = new Blob(chunks, { 'type' : 'audio/wav' });

                                // 创建一个 FormData 对象
                                let formData = new FormData();
                                // 添加录音文件
                                formData.append('audio_file', blob, 'audio.wav');

                                // 使用 fetch API 发送录音文件
                                // url 为请求的路径
                                const response = fetch(url, {
                                    method: 'POST',
                                    body: formData
                                })
                                .then(response => response.json())
                                .then(data => console.log(data))
                                .catch(error => console.error('Error:', error));
                            };
                        })
                        .catch(err => console.log('Error: ', err));
                    recordButton.textContent = '结束录制';
                    isRecording = true;
                } else {
                    mediaRecorder.stop();
                    recordButton.textContent = '开始录制';
                    isRecording = false;
                }
            });

同理,上传文件给后台原理相同。

标签:mediaRecorder,recordButton,isRecording,JS,chunks,let,后台,wav
From: https://www.cnblogs.com/guorh666/p/17519595.html

相关文章

  • js-遍历两个对象数组,属性值相等的一项合并属性并生成新数组
    operatData.value.seriesList=res.data.seriesList.reduce((accumulator,current)=>{constexisting=userOptionsColor.find(item=>item.name===current.name)if(existing){accumulator.push({...current,...existing})......
  • SAP CRM Fiori 应用后台 OData 服务性能优化的一些思路
    取一个task的attachmentheader信息(包含4个attachment)都需要0.5秒时间,太慢了。具体分析:取attachment时,会先callretrieve_task_opt取taskheader信息,消耗0.1秒。通过之前4个节点的优化经验,这个retrieve是不需要的,此时header信息已经在memory里了,直接使用即可。主要的瓶颈就......
  • Nodejs开发web后台
    Nodejs开发web后台expressexpress介绍express是一个基于Node.js平台的极简、灵活的WEB应用开发框架,官方网址简单来说,express是一个封装好的工具包,封装了很多功能,便于我们开发WEB应用(HTTP服务)express使用express本身是一个npm包,所以可以通过npm安装#初始化一个项目npmini......
  • 什么是 SAP UI5 的 cldr json 文件
    SAPUI5是一个基于HTML5的UI开发框架,它允许开发人员构建功能丰富、易于维护和满足企业需求的应用程序。它是一个集成了各种UI控件、工具和库的强大框架,旨在简化企业级应用程序的开发过程。SAPUI5的一个重要特性是对国际化和本地化的支持,这意味着开发人员可以构建能够适应......
  • SAP UI5 manifest.json 文件的 config 区域
    SAPUI5是一种用于构建企业级Web应用的HTML5用户界面技术。它提供了一套丰富的控件库,并支持MVC(模型-视图-控制器)架构、双向数据绑定等特性。manifest.json是SAPUI5应用的元数据文件,包含了应用的配置信息、依赖项、模型、路由等内容。在manifest.json文件中,config区......
  • Node.js 模块化机制原理探究
    前言Node应用是由模块组成的,Node遵循了CommonJS的模块规范,来隔离每个模块的作用域,使每个模块在它自身的命名空间中执行。CommonJS规范的主要内容:模块必须通过module.exports导出对外的变量或接口,通过require()来导入其他模块的输出到当前模块作用域中。CommonJS模块的特......
  • python -- json与dict
    一、python中的dict 与json1、dict 的表现形式    dict中的key和value,不论写的是 双引号 还是 单引号,最后 python的dict都会转成 单引号。2、jsonjson是一个字符串,是一种数据交换格式,不同于dict属于python的基础数据类型。js......
  • js 数组和链表分别实现队列
    链表实现/***1.单项链表实现队列,但要同时记录head和tail*2.要从tail入队,head出对,否则出队时,tail不好定位*2.单独记录length,不可遍历链表获取length*/classMyQueue{head=null;//头tail=null;//尾len=0;add(n){letnewNode={......
  • js的一些小技巧
    作用域全局作用域局部作用域(函数里)也称函数作用域块级作用域{}包裹的例如iffor 括号()也算变量全局变量谁都能用,在函数内也可以局部变量,只能在该函数内用,如果这个函数嵌套了子函数,那么父函数定义的变量,子函数也能用,不能颠倒,父亲的钱就是儿子的钱,儿子的钱不是父亲的钱块级变量(){}......
  • JS高级用法:像大神一样玩转JavaScript
    前言众所周知,JavaScript是一种非常流行的编程语言,它已经成为了网页开发的必备技能。但是,在我们从事JavaScript编程的时候,我们却没有完全发掘和利用它的全部潜力。在本文中,我们将分享一些高级的JavaScript技巧,希望帮助掘友们更好地理解和掌握JavaScript编程。关于JS高级用法在学习Ja......