H5app录制语音并上传服务器demo

复制即用语音录制demo,根据音频录制格式的不同,5s音频大概7KB左右,如果需要更详细的H5API介绍,用力戳:

w3cschool H5 文档
H5官网文档

注意:

手机上基本可以播放任何可以录制的音频格式,如mp3/wav/aac/amr,
但是如果放在网页上面播放,需要查看该网页是否兼容播放该格式

依赖:jquery-2.1.4.js

话不多少,上代码:

  • html body 代码

  • js 代码
// 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", onPlusReady, false);
    //var r = null;
    // 扩展API加载完毕,现在可以正常调用扩展API
    function onPlusReady() {
        r = plus.audio.getRecorder();
    }
    function startRecord() {
        if (r == null) {
            alert("Device not ready!");
            return;
        }
        // format: wav/aac/amr/mp3(H5接口只支持ios录制MP3)
        // samplerate:"4000","8000","16000" 音频录制采样率,如果手机不支持,默认8000
        r.record({filename: "_doc/audio/", format: "wav", samplerate: "4000"}, function (url) {
            // 得到的url是音频录制完成后在你手机的地址
            createUpload(url)
        }, function (e) {
            alert("Audio record failed: " + e.message);
        });
    }
    
// 手机播放音频方法
    function playRecord(url) {
        var n = plus.audio.createPlayer(url);//创建一个音频播放对象
        n.play();
    }

// 上传音频
    function createUpload(file) {
        var task = plus.uploader.createUpload(服务器地址, {method: "POST"}, function (t, status) {
            // 上传完成
            if (status == 200) {
                alert("Upload success: " + t.url);
            } else {
                alert("Upload failed: " + status);
            }
        });
        task.addFile(file, {key: "aaa"}); // 以表单的方法上传整个音频
        task.start();
    }
$("#adiv").on(
        'click', function () {
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                alert('手机')
                // playRecord('http://192.168.80.110:5000/static/images/uploads-audio/1545268196773.wav')
                playRecord(音频播放地址,本地或者网络音频都可以)
            } else {
                alert('电脑')
                var f = document.getElementById('voice')
//               audio 标签播放方法,注意浏览器音频格式的兼容性,例如火狐支持wav文件而谷歌不支持播放
                f.src = 音频地址
                f.play()
            }
        }
    )

    function stopRecord() {
        r.stop();
    }

最后的最后附上浏览器音频兼容性
基本上是没有一种通用格式兼容所有浏览器,除非使用别的播放器插件或者flash或者使用音频裸流,如本人试过播放服务器上的amr音频文件,需要转换为base64格式,有兴趣的可以自己试一下

音频格式 Chrome Firefox IE9 Opera Safari
OGG 支持 支持 支持 不支持 不支持
MP3 支持 不支持 支持 不支持 支持
WAV 不支持 支持 不支持 支持 不支持

你可能感兴趣的:(H5)