版权声明:本博客为博主原创,未经允许不能转载 https://blog.csdn.net/qq_43466173/article/details/85298338
复制即用语音录制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 | 不支持 | 支持 | 不支持 | 支持 | 不支持 |