已经把语音转成base64,但是怎么获取这个base64上传到服务器上,参数是files

hm1111_ergrdf
  • 1.5k

已经把语音转成base64,但是怎么获取这个base64上传到服务器上,参数是files

图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link href="css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="css/audio.css" />
        <style type="text/css">
            .fiexed-buttom {
                position: fixed;
                bottom: 30px;
                left: 15px;
                right: 15px;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">录音</h1>
        </header>
        <div class="mui-content">
            <div class="fiexed-buttom">
                <button id="recorder" type="button" class="mui-btn mui-btn-blue mui-btn-block">录制语音文件转base64字符串</button>
                <button id="player" type="button" class="mui-btn mui-btn-blue mui-btn-block">base64字符串转成语音文件播放</button>
            </div>
        </div>

        <div id='sound-alert' class="rprogress">
            <div class="rschedule"></div>
            <div class="r-sigh">!</div>
            <div id="audio-tips" class="rsalert">手指上滑,取消发送</div>
        </div>

        <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init({
                gestureConfig: {
                    tap: true, //默认为true
                    drag: true, //默认为true
                    hold: true, //默认为false,不监听
                    release: true //默认为false,不监听
                }
            });

            var MIN_SOUND_TIME = 800;
            var recorder = null;
            var startTimestamp = null;
            var stopTimestamp = null;
            var stopTimer = null;
            var recordCancel = false;
            var files = [];

            var soundAlert = document.getElementById("sound-alert");
            var audioTips = document.getElementById("audio-tips");
            // 控制录音弹出框是否播放
            var setSoundAlertVisable = function(show) {
                if(show) {
                    soundAlert.style.display = 'block';
                    soundAlert.style.opacity = 1;
                } else {
                    soundAlert.style.opacity = 0;
                    //  完成再真正隐藏
                    setTimeout(function() {
                        soundAlert.style.display = 'none';
                    }, 200);
                }
            };

            mui.plusReady(function() {
                /**
                 * 录制语音文件转base64字符串
                 */
                // 按住录音(长按开始录音)
                document.querySelector('#recorder').addEventListener('hold', function() {
                    recordCancel = false;
                    if(stopTimer) clearTimeout(stopTimer);

                    audioTips.innerHTML = "手指上划,取消发送";
                    soundAlert.classList.remove('rprogress-sigh');
                    setSoundAlertVisable(true);

                    // 获取当前设备的录音对象
                    recorder = plus.audio.getRecorder();
                    startTimestamp = (new Date()).getTime();

                    console.log("supportedFormats:" + JSON.stringify(recorder.supportedFormats));
                    recorder.record({
                        format: "amr",
                        filename: "_doc/audio/"
                    }, function(path) {
                        if(recordCancel) return;
                        console.log("path:" + path);
                        Audio2dataURL(path);
                    }, function(e) {
                        mui.toast("录音出现异常: " + e.message);
                    });
                })

                // 释放保存(松手保存)
                document.querySelector('#recorder').addEventListener('release', function() {
                    if(audioTips.classList.contains("cancel")) {
                        audioTips.classList.remove("cancel");
                        audioTips.innerHTML = "手指上划,取消发送";
                    }
                    // 判断录音时间
                    stopTimestamp = (new Date()).getTime();
                    if(stopTimestamp - startTimestamp < 800) {
                        audioTips.innerHTML = "录音时间太短";
                        soundAlert.classList.add('rprogress-sigh');
                        recordCancel = true;
                        stopTimer = setTimeout(function() {
                            setSoundAlertVisable(false);
                        }, 800);
                    } else {
                        setSoundAlertVisable(false);
                    }
                    if(stopTimestamp - startTimestamp > 10000) { //10秒(待添加到限定时间自动结束)
                        audioTips.innerHTML = "录音时间结束";
                        soundAlert.classList.add('rprogress-sigh');
                        recordCancel = true;
                        stopTimer = setTimeout(function() {
                            setSoundAlertVisable(false);
                        }, 800);
                    } else {
                        setSoundAlertVisable(false);
                    }

                    recorder.stop();
                })

                // 拖动屏幕(手指上划,取消发送)
                document.body.addEventListener('drag', function(event) {
                    if(Math.abs(event.detail.deltaY) > 50) {
                        if(!recordCancel) {
                            recordCancel = true;
                            if(!audioTips.classList.contains("cancel")) {
                                audioTips.classList.add("cancel");
                            }
                            audioTips.innerHTML = "松开手指,取消发送";
                        }
                    } else {
                        if(recordCancel) {
                            recordCancel = false;
                            if(audioTips.classList.contains("cancel")) {
                                audioTips.classList.remove("cancel");
                            }
                            audioTips.innerHTML = "手指上划,取消发送";
                        }
                    }
                }, false);

                /**
                 * 录音语音文件转base64字符串
                 * @param {Object} path
                 */
                function Audio2dataURL(path) {
                    plus.io.resolveLocalFileSystemURL(path, function(entry) {
                        entry.file(function(file) {
                            var reader = new plus.io.FileReader();
                            reader.onloadend = function(e) {
                                console.log(e.target.result);
                                alert(e.target.result)
                            };

                            reader.readAsDataURL(file);
                        }, function(e) {
                            mui.toast("读写出现异常: " + e.message);
                        })
                    })
                }

                /**
                 * base64字符串转成语音文件播放
                 */
                document.querySelector('#player').addEventListener('tap', function(e) {
                    // 语音文件dataURI
                    //               var base64Str = 'data:audio/amr;base64,IyFBTVIKPJEXFr5meeHgAeev8AAAAIAAAAAAAAAAAAAAAAAAAAA8SHcklmZ54eAB57rwAAAAwAAAAAAAAAAAAAAAAAAAADxVAIi2Znnh4AHnz/AAAACAAAAAAAAAAAAAAAAAAAAAPEj5H5ZmeeHgAeeK8AAAAMAAAAAAAAAAAAAAAAAAAAA8CPlmkh3hIXBB58qREQnBLS2AJiaa8Vqa7gILj8G3gDxCdymROQIAABfzq88RwMhLefLr3vK3U6azfvq2nmHAPD72h50rSBEAHi+aAMR3ptW1FgXQIAf3RyrTkKRbVNA8RG5xjrpQA2Af58rpoypM11/kORggGJI0bKkO9aI3wDxEclqNTNoAgFMuupawKhLxonjKARrlXizd3p380vlAPEJoZ0PvUAFgHvfaQQNN2t5xEFKHP1urAHfDDXmGA4A8NHtpjqWEAOBSIPrEkpKP2HysXQprlqRKAXWT10+N0DyQY3GUbFABQB/vCmFBoBTVkGo8slIzg9wwUr/RvD3APAB7ZIjOyA5gH+fKwRKrZcdSOFwEx+Ze8g/wOCfNaAA8CARG6fxy/uA88Dp+Yugn8Wk/5KA9sbyxsvy/jRTRADwCDhY5+GPd4flQK/fVvOVSgXf7AIZEoon9+tA3MEDgPAgFpUn/9LXgzts6yb7dudC4IkGZo1Z5/90vmfbgtHA8Ag+dlgBn8EOE0UpIC35c9H+qChMrd7PFyCTBwv60MDwICD9OAGf64ePJOrcalLDNLS7ovC5JvE9mCWNelXgwPAIHy0yrH59Bj4BaI4qyP8Xt+4Qc4gfGkUBzQtfh3LA8CAhCQf2nxxQbKNpQLF/M/aPIom9Gf4PjhoHm3AlmsDwCBi1B89754PLEa2pTjxBEU2KJgXSHqNxALEnqcoJwPAQJp4nk7pfhyy+6FzAnVe2vj/kYCpudow+hkuBCaqA8BAmiWeAfXyGPLYu3hWWMRjRajOZDkCUUss+2yKJQ8DwCEDSRtU9O4fGHmmsTyCv60riXaHIP/Y0ae9yPV3LwPAgjnRnhh/yJYY0MUtwAMDpA4bxLil8Vor6diMJOFfA8Aj2jWeN28QH/hRTh60wbArI03gJuPTPDoL7SRUmskDzgSh4L5sctw9h1rQYDUMqwQW5eR+FuP9ZUE9iQQC2wPAhBlGnjYG0loy4EncjBPAPZExLaiekfQQ+6sJSh4IA8CFITYeZfZ6H9gbxPQBDr6vWF4k6J0ZOtHyzw2/vgYDwITbJp5kb0tKrRi2EWjYt8KSlbziAzEj+QA6Pv0ZswPARMDmHh++GFutEbMapR4XdZA1i03eV4A3TAoWH/WqA8CEAEYeN3aEPdjDt4rToGRiO0MRy7QkAWWFT0g4DoEDwIRAxh+J3hgc+Ma/1kshlSrWWKFIO1+QyfnfIiWsLQPAgiAmH+rB8B+4Nr5RddjHVBtf0SoHWEQSUCGLRgruA8AlILTgIXLMH7gXoyfRJg21YxPRQw5ig5Kx4Slkb2cDwIO75eDFR4wfDEGwOBYZ50KTm0PJ4LHYs4lPwT1iDwPAI2C0Ndrloh8VBq+t13NvJnBEP+W/HlAXR69mYDRiA8CEW2VgmNA0HwSmtAkCszS0MEkutOvmdBvYI6yKLkgA=='
                    var base64Str = e.target.result;
                    // 转成.amr文件播放
                    dataURL2Audio(base64Str, function(entry) {
                        var toURL = entry.toURL();
                        // 播放音频
                        playAudio(toURL);
                    })
                })

            })

            /**
             * 播放音频
             * @param {Object} path
             */
            function playAudio(path) {
                var player = plus.audio.createPlayer(path);
                player.play(function() {
                    mui.toast("播放成功");
                }, function(e) {
                    mui.toast("播放失败");
                });
            }

            /**
             * base64字符串转成语音文件(参考http://ask.dcloud.net.cn/question/16935)
             * @param {Object} base64Str
             * @param {Object} callback
             */
            function dataURL2Audio(base64Str, callback) {
                var base64Str = base64Str.replace('data:audio/amr;base64,', '');
                var audioName = (new Date()).valueOf() + '.amr';

                plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
                    fs.root.getFile(audioName, {
                        create: true
                    }, function(entry) {
                        // 获得平台绝对路径
                        var fullPath = entry.fullPath;
                        if(mui.os.android) {
                            // 读取音频
                            var Base64 = plus.android.importClass("android.util.Base64");
                            var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
                            try {
                                var out = new FileOutputStream(fullPath);
                                var bytes = Base64.decode(base64Str, Base64.DEFAULT);
                                out.write(bytes);
                                out.close();
                                // 回调
                                callback && callback(entry);
                            } catch(e) {
                                console.log(e.message);
                            }
                        } else if(mui.os.ios) {
                            var NSData = plus.ios.importClass('NSData');
                            var nsData = new NSData();
                            nsData = nsData.initWithBase64EncodedStringoptions(base64Str, 0);
                            if(nsData) {
                                nsData.plusCallMethod({
                                    writeToFile: fullPath,
                                    atomically: true
                                });
                                plus.ios.deleteObject(nsData);
                            }
                            // 回调
                            callback && callback(entry);
                        }
                    })
                })
            }
        </script>
    </body>

</html>
回复
阅读 6.4k
3 个回答
✓ 已被采纳

你纠结的意思是 参数是files,其实这个是你和后端约束的。

clipboard.png

比如用
`$.ajax({

...
data: {
    files: 你的获取的base64
},
....

})`

其中files就是你说的参数(key),后端会根据这个files获取你的base64。假如你写 audio,那给后台的参数是 audio: XXXX

简单来说,就是用你平常的传递数据方式就行,$.ajax 或者 框架的 或者原生的Ajax。

字符串转成data(二进制),直接传就可以了

base64本质就是一段字符串,你就可以用普通的提交表单的方法,如form或者ajax/xhr,来post到服务器上就可以了。

宣传栏