js录音并上传mp3 示例源码

基本信息

源码名称：js录音并上传mp3 示例源码

源码大小：0.06M

文件格式：.zip

开发语言：js

更新时间：2019-08-05

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Html5网页JavaScript录制MP3音频</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Html5网页JavaScript录制MP3音频</h1>
    <button onclick="funStart(this);" id="btnStart" disabled>录制</button>
    <button onclick="funStop(this);" id="btnStop" disabled>停止</button>
    <button onclick="funUpload(this);" id="btnUpload" disabled>上传</button>
    <h4>调试信息：</h4>
    <div id="recordingslist"></div>
    <script src="js/recordmp3.js"></script>
    <script>
        var recorder = new MP3Recorder({
            debug:true,
            funOk: function () {
                btnStart.disabled = false;
                log('初始化成功');
            },
            funCancel: function (msg) {
                log(msg);
                recorder = null;
            }
        });
        var mp3Blob;


        function funStart(button) {
            btnStart.disabled = true;
            btnStop.disabled = false;
            btnUpload.disabled = true;
            log('录音开始...');
            recorder.start();
        }

        function funStop(button) {
            recorder.stop();
            btnStart.disabled = false;
            btnStop.disabled = true;
            btnUpload.disabled = false;
            log('录音结束，MP3导出中...');
            recorder.getMp3Blob(function (blob) {
                log('MP3导出成功');

                mp3Blob = blob;
                var url = URL.createObjectURL(mp3Blob);
                var div = document.createElement('div');
                var au = document.createElement('audio');
                var hf = document.createElement('a');

                au.controls = true;
                au.src = url;
                hf.href = url;
                hf.download = new Date().toISOString()   '.mp3';
                hf.innerHTML = hf.download;
                div.appendChild(au);
                div.appendChild(hf);
                recordingslist.appendChild(div);
            });
        }

        function log(str) {
            recordingslist.innerHTML  = str   '<br/>';
        }

        function funUpload() {
            var fd = new FormData();
            var mp3Name = encodeURIComponent('audio_recording_'   new Date().getTime()   '.mp3');
            fd.append('mp3Name', mp3Name);
            fd.append('file', mp3Blob);

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    recordingslist.innerHTML  = '上传成功：<a href="'   xhr.responseText   '" target="_blank">'   mp3Name   '</a>';
                }
            };
        
            xhr.open('POST', 'upload.ashx');
            xhr.send(fd);
        }
    </script>
</body>
</html>