本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • Html5网页js录制MP3录音导出代码
    时间:2019-12-24 13:00 来源:开源之家 作者:开源之家测试提供 下载:52 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:58.7 KB
    • 运行环境:HTML
    • 下载次数:52 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    Html5网页js录制MP3录音导出代码

    特效描述:Html5网页 js录制MP3 录音导出代码,Html5网页js录制MP3录音导出代码

    代码结构

    1. 引入JS

    1
    <script src="js/recordmp3.js"></script>

    2. HTML代码

    <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>
        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>

    Html5网页js录制MP3录音导出代码

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信