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

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

注意：

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

依赖：jquery-2.1.4.js

话不多少，上代码：

html body 代码

<!-- 怕你手指太大，点不了按钮，所以弄了这个div也能让你播放音频喔 -->
<div id="adiv" style="width: 100px;height: 100px;background: cornflowerblue"></div>

<audio id="voice">
<!-- 播放音频用 -->
</audio>
<input type="button" value="Start Record" onclick="startRecord();"/>
<input type="button" value="Stop Record" onclick="stopRecord();"/>

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	不支持	支持	不支持	支持	不支持

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

注意：

依赖：jquery-2.1.4.js

猜你喜欢