`

web 端录音

    博客分类：
  • web
web 
阅读更多 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button onclick="start()">录音</button>
    <button id="stop">停止</button>
</body>
<script>

    function play(blob){
        var reader = new FileReader();
        reader.onload = function(e) {
            var wavBase64 = e.target.result;
            console.log(wavBase64);  //此处输出为 wav格式的 base64 码
        }
        reader.readAsDataURL(blob);

        // var url = URL.createObjectURL(blob);
        // var audio = new Audio();
        // audio.src = url;
        // audio.play();
    }
    var stop = document.getElementById('stop');
    var chunks = [];
    var handleSuccess = function(stream) {  
        var mediaRecorder = new MediaRecorder(stream);

        stop.onclick = function() {
          mediaRecorder.stop();
        }

        mediaRecorder.onstop = function(e) {
            var blob = new Blob(chunks, { 'type' : 'audio/wav' });
            chunks = [];
            play(blob);
        }

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

    function start(){
        navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(handleSuccess);
    }

</script>
</html>
分享到：
| js 获取浏览器类型和版本
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于JS实现web端录音与播放功能

    首先，实现Web端录音的基础是WebRTC技术中的`getUserMedia` API，它允许用户访问媒体设备，如麦克风。请注意，出于安全考虑，`getUserMedia`在Chrome等浏览器的最新版本中，要求页面必须使用HTTPS协议提供服务...

    php+flash 网页录音并上传

    总的来说，"php+flash 网页录音并上传"是一种结合了传统技术和现代Web交互方式的解决方案，尽管Flash已经不再是首选，但了解这种技术的实现原理对于理解Web音频处理和服务器交互仍具有一定的价值。

    Recorder用于html5录音 html5录音 mp3 wav ogg webm amr g711a g711u 格式

    html5 js 录音 mp3 wav ogg webm amr g711a g711u 格式，​支持在大部分已实现getUserMedia的移动端、PC端浏览器麦克风录音、实时处理，主要包括：Chrome、Firefox、Safari、iOS 14.3+、Android WebView、腾讯...

    h5 web录音并上传后端

    这个“H5 Web录音并上传后端”的示例着重展示了如何利用H5的新特性在浏览器内实现录音功能，并将录制的音频文件发送到服务器端。这一技术在在线教育、聊天应用、语音识别等多种场景中有着广泛的应用。 【描述】：...

    记录器：html5 js浏览器web端录音

    主要用于Web端录制短音频。 支持录音，暂停，恢复，和录音播放。 支持音频数据的压缩，支持单双通道录音。 支持录音时长，录音大小的显示。 支持边录边转（播放） （0.x支持）。 支持导出录音文件，格式为pcm或wav。...

    浏览器麦克风实时录制音频流数据，通过websocket传输

    本主题探讨的是如何利用浏览器的Web Audio API和WebSockets技术实现实时录音并将其流式传输到服务器。以下是对这个话题的详细解析。 1. **Web Audio API**： Web Audio API是HTML5引入的一套强大的音频处理工具，...

    web录音的实现

    通过研究这些内容，你可以更深入地了解Web录音的实现细节，包括Flash ActionScript代码、JSP页面的脚本以及服务器端的处理逻辑。如果你遇到任何问题，这个资源包应该能提供解答。记得在实际项目中遵循安全和隐私的...

    WEB 录音插件 demo

    C#是一种常用的服务器端编程语言，常用于构建ASP.NET Web应用程序，它可以与前端的HTML5和JavaScript进行交互，处理HTTP请求和响应。 而"html5"标签则明确指出此DEMO主要依赖HTML5的新特性，尤其是Web Audio API和...

    Vue实现PC端录音功能

    以上就是使用Vue.js实现PC端录音功能的基本步骤。结合Vue的响应式系统，你可以根据业务需求添加更多的功能，例如显示录音时间、提供文件下载链接等。在实际项目中，别忘了考虑错误处理和用户体验，确保录音功能的...

    Web在线录音（C#.net）

    综上所述，"Web在线录音（C#.net）"项目涵盖了多种技术，包括Silverlight客户端开发、C#编程、音频处理、网络通信以及服务器端处理。通过深入学习和实践，开发者不仅可以掌握在线录音的实现，还能提升在RIA开发领域...

    HTML5 web录音

    在实现Web录音的过程中，通常会有一个后台服务来处理音频文件的上传。例如，这里的IIS工程就是这样的角色。IIS（Internet Information Services）是微软提供的一个Web服务器，可以接收并处理HTTP请求。在HTML5录音...

    android客户端与web服务器端的文件上传与下载源代码，和android录音功能

    android客户端与web服务器端的文件上传与下载源代码，和android录音功能。 HttpDownloader.java：下载文件 FileUtil.java：post方法上传文件 MainActivity.java：录音功能 TestFileActivity.java：测试文件的上传与...

    web-录音服务源代码

    &gt; 主要用于Web端录制短音频。 + 支持录音，暂停，恢复，和录音播放。 + 支持音频数据的压缩，支持单双通道录音。 + 支持录音时长、录音大小的显示。 + ~~支持边录边转（播放）~~(0.x支持)。 + 支持导出录音文件，...

    网页端录音Recorder.js，单声道16k采样率录音工具

    在网页端录音方面，Recorder.js 使用了Web Audio API，这是一个强大的浏览器内置的音频处理框架，允许开发者处理和播放音频流。Recorder.js通过创建一个MediaStream对象来捕捉用户的麦克风输入，然后利用...

    波形图程序 另跪求web在线录音

    2. 数据获取：Web 在线录音涉及到浏览器端的媒体捕获，这需要利用 HTML5 的 MediaDevices.getUserMedia 接口来获取用户的麦克风输入。这个接口允许网页应用程序访问用户的摄像头和麦克风设备。 3. 实时流处理：对于...

    .net测试WEB录音 基于flashwavrecorder

    在.NET环境中，我们需要通过JavaScript与服务器端的ASP.NET页面进行通信，以实现上传和处理录音文件。 在项目中，我们通常会有以下几个关键文件： 1. `WebForm1.aspx`：这是ASP.NET的默认网页模板，我们可以在这个...

    AI语音科大讯飞智能api【web端接口调用实现语音识别】webscoket调试试用

    在本文中，我们将深入探讨如何使用科大讯飞的AI语音智能API来实现在Web端进行语音识别。这个过程涉及到人工智能、语音识别技术、WebSocket通信以及JavaScript编程。首先，我们来了解一下科大讯飞的AI语音服务。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics