錄音后怎么保存提交到手機本地呢?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>Hello H5+ 2</title>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
var gentry = null,
hl = null,
le = null;
var er = null,
ep = null;
// H5 plus事件處理
function plusReady() {
// 獲取音頻目錄對象
plus.io.resolveLocalFileSystemURL("_doc/", function(entry) {
entry.getDirectory("audio", {
create: true
}, function(dir) {
gentry = dir;
updateHistory();
}, function(e) {
outSet("Get directory \"audio\" failed: " + e.message);
});
}, function(e) {
outSet("Resolve \"_doc/\" failed: " + e.message);
});
}
if(window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// DOMContentLoaded事件處理
document.addEventListener("DOMContentLoaded", function() {
// 獲取DOM元素對象
hl = document.getElementById("history");
le = document.getElementById("empty");
er = document.getElementById("record");
rt = document.getElementById("rtime");
ep = document.getElementById("play");
pt = document.getElementById("ptime");
pp = document.getElementById("progress")
ps = document.getElementById("schedule");
}, false);
// 添加播放項
function createItem(entry) {
var li = document.createElement("li");
li.className = "ditem";
li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
li.setAttribute("onclick", "playAudio(this);");
hl.insertBefore(li, le.nextSibling);
li.querySelector(".aname").innerText = entry.name;
li.querySelector(".ainf").innerText = "...";
li.entry = entry;
updateInformation(li);
// 設(shè)置空項不可見
le.style.display = "none";
}
// 開始錄音
var r = null,
t = 0,
ri = null,
rt = null;
function startRecord() {
outSet("開始錄音:");
r = plus.audio.getRecorder();
setTimeout("stopRecord('120 seconds!')",121000);//錄制120秒
if(r == null) {
outLine("錄音對象未獲取");
return;
}
r.record({
filename: "_doc/audio/"
}, function(p) {
outLine("錄音完成:" + p);
plus.io.resolveLocalFileSystemURL(p, function(entry) {
createItem(entry);
}, function(e) {
outLine("讀取錄音文件錯誤:" + e.message);
});
}, function(e) {
outLine("錄音失敗:" + e.message);
});
er.style.display = "block";
t = 0;
ri = setInterval(function() {
t++;
rt.innerText = timeToStr(t);
}, 1000);
}
// 停止錄音
function stopRecord() {
er.style.display = "none";
rt.innerText = "00:00:00";
clearInterval(ri);
ri = null;
r.stop();
w = null;
r = null;
t = 0;
}
// 清除歷史記錄
function cleanHistory() {
hl.innerHTML = '<li id="empty" class="ditem-empty">無歷史記錄</li>';
le = document.getElementById("empty");
// 刪除音頻文件
outSet("清空錄音歷史記錄:");
gentry.removeRecursively(function() {
// Success
outLine("操作成功!");
}, function(e) {
ouline("操作失?。? + e.message);
});
}
// 獲取錄音歷史列表
function updateHistory() {
if(!gentry) {
return;
}
var reader = gentry.createReader();
reader.readEntries(function(entries) {
for(var i in entries) {
if(entries[i].isFile) {
createItem(entries[i]);
}
}
}, function(e) {
outLine("讀取錄音列表失?。? + e.message);
});
}
// 獲取錄音文件信息
function updateInformation(li) {
if(!li || !li.entry) {
return;
}
var entry = li.entry;
entry.getMetadata(function(metadata) {
li.querySelector(".ainf").innerText = dateToStr(metadata.modificationTime);
}, function(e) {
outLine("獲取文件\"" + entry.name + "\"信息失?。? + e.message);
});
}
// 播放音頻文件
function playAudio(li) {
if(!li || !li.entry) {
ouSet("無效的音頻文件");
return;
}
outSet("播放音頻文件:" + li.entry.name);
startPlay("_doc/audio/" + li.entry.name);
}
// 播放文件相關(guān)對象
var p = null,
pt = null,
pp = null,
ps = null,
pi = null;
// 開始播放
function startPlay(url) {
ep.style.display = "block";
var L = pp.clientWidth;
p = plus.audio.createPlayer(url);
p.play(function() {
outLine("播放完成!");
// 播放完成
pt.innerText = timeToStr(d) + "/" + timeToStr(d);
ps.style.webkitTransition = "all 0.3s linear";
ps.style.width = L + "px";
stopPlay();
}, function(e) {
outLine("播放音頻文件\"" + url + "\"失敗:" + e.message);
});
// 獲取總時長
var d = p.getDuration();
if(!d) {
pt.innerText = "00:00:00/" + timeToStr(d);
}
pi = setInterval(function() {
if(!d) { // 兼容無法及時獲取總時長的情況
d = p.getDuration();
}
var c = p.getPosition();
if(!c) { // 兼容無法及時獲取當(dāng)前播放位置的情況
return;
}
pt.innerText = timeToStr(c) + "/" + timeToStr(d);
var pct = Math.round(L * c / d);
if(pct < 8) {
pct = 8;
}
ps.style.width = pct + "px";
}, 1000);
}
// 停止播放
function stopPlay() {
clearInterval(pi);
pi = null;
setTimeout(resetPlay, 500);
// 操作播放對象
if(p) {
p.stop();
p = null;
}
}
// 重置播放頁面內(nèi)容
function resetPlay() {
ep.style.display = "none";
ps.style.width = "8px";
ps.style.webkitTransition = "all 1s linear";
pt.innerText = "00:00:00/00:00:00";
}
// 重寫關(guān)閉
var _back = window.back;
function resetback() {
// 停止播放
if(ep.style.display == "block") {
stopPlay();
} else if(er.style.display == "block") {
stopRecord();
} else {
_back();
}
}
window.back = resetback;
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />
<style type="text/css">
.rp {
width: 100%;
height: 100%;
display: none;
text-align: center;
position: fixed;
top: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
overflow: hidden;
}
.aname {
font-size: 16px;
}
.ainf {
font-size: 12px;
}
.rtime {
font-size: 22px;
color: #FF0000;
}
.ptime {
margin-top: 40%;
font-size: 22px;
color: #FFFFFF;
}
.rprogress {
background: url(../img/arecord.png) no-repeat center center;
background-size: 32px 32px;
}
.rschedule {
background-color: rgba(0, 0, 0, 0);
border: 5px solid rgba(0, 183, 229, 0.9);
opacity: .9;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 36px;
height: 36px;
margin: 0 auto;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.progress {
width: 90%;
background-color: #666;
margin: 0 5%;
border: 1px solid #222;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.schedule {
width: 8px;
height: 8px;
margin: 1px 0;
background-color: #FFCC33;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.stop {
width: 72px;
height: 72px;
background: url(../img/astop.png) center center;
background-size: 72px 72px;
margin: auto;
-webkit-border-radius: 72px;
border-radius: 72px;
}
.stop:active {
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;
}
.iplay {
display: block;
background: no-repeat right center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAD9UlEQVR4nO2b3XETMRRGDwzvoYOkg5hRAVkqiKmAdIA7wHSQVECoALsC1gXciV0BTge4gvCwgnHk9d/+WF8m97ztxrlXs8fS1Urym6enJxwd3uZugPMcFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEcCFiuBAx3uVuwDGY2XtgCBTAALjc8tEFMAdKYBJC+HOK9nXBm5dwUM7MCmAEXDcMMQVuQwhlV23qC2khZjYAboGrjkLOgFEIYd5RvM6RrSFmdgs80J0MYqyHGFsSuR4S60TJ9vrwCEziZ+YhhGXy/xdU9aWgqjfnW+IsgEKtvkgJiUPUPfUyZsD42DoQ68+Y+p62AG6UhjAZITt6xopq3L9vGf+Gqh6dJX+S6ilKNaRkU8YCGLSVARBjDGLMdS5jbgkkhMQiWyejSGtEG2KsghopKoU++5AV68ZDcrvXYWTH8Pghdz1R6CHpN3MFDPsc02PsYcy1qy0nJ6uQOANKZz+jfcOUmd3H6W1jYo5RcvsqtikbuXtI+kBmBxbwz8DczMZtksdcsz1tOinZhMRxPF2bGh8R4gz4amZLMxu2aEqa8zq2LQs5e0j6EB8bLv6dAz/NrGwyjMWcj3vadjJyCimS60nLeFfAbzO7bfANT3MXLdvSmJxCBsl12VHcL8AyvpkfSpo7bdvJyCkkfQfocv5/Bnw3s/mBs6Y097aFzd7JPcv6T5dv5GtcAr/2TZN7yt0IGSE908k0+RS8FiEvhhd1yKEFUw5YAVBApoe0XQrZwgL4GEIY7pLRU+5G5OwhC57PZgbAsqPYK6rdxUMXC9Npbro8fzJy9pB0qll0FPcOuDhCRl3ubEvwOYWUyXXb5YoZ1X7GqMHSfZq7bNmWxuQUki5XnDdc+n4EPoUQiiabSzFnejKl7TJOY7IJid/iaXJ7fESIFfCNas+9zQNMc05zHnjIPctKx/mrA9egflCJGLd5eDFXukGWdddQYU+95PlDWVE97GXPeS+oivf6saBZCKHoM+8+cvcQ2NyhOwMmfW4SxdgTNs9oZd0tBAEhsRDfJbcvgbIPKTtOnNzlPnECAkPWP8xsTv3ZrJ1v2UfmuKDqGRt5QgjZ9kDWyd5D1iioP1U4P3KzqZYYY5v0om38rpDpIeCHrUFMCPjPEeSE/COetf3SU/i7EEL2GVUdSjXkGfGBfWDzIFsb/q93dRizU2R7yDr+o09R/GfRzsmRrSGvFRcihgsRw4WI4ULEcCFiuBAxXIgYLkQMFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMf4CVuqCm+17t3sAAAAASUVORK5CYII=);
background-size: 50px 44px;
-ms-touch-action: auto;
}
</style>
</head>
<body>
<header id="header">
<p class="nvbt iback" onclick="back(true);"></p>
<p class="nvtt">Audio</p>
<p class="nvbt idoc" onclick="openDoc('Audio Document','/doc/audio.html')"></p>
</header>
<p id="dcontent" class="dcontent">
<br/>
<p class="button" onclick="startRecord()">開始錄音</p>
<p class="button" onclick="startPlay('_www/audio/friendship.mp3')">播放音樂</p>
<br/>
<!-- History list -->
<ul id="history" class="dlist" style="text-align:left;">
<li id="empty" class="ditem-empty">無歷史記錄</li>
</ul>
<br/>
<p class="button button-waring" onclick="cleanHistory();">清空歷史記錄</p>
<br/>
</p>
<p id="output">
Audio用于管理音頻設(shè)備,可調(diào)用麥克風(fēng)錄制音頻文件,也可播放音頻文件。
</p>
<p id="play" class="rp">
<p id="ptime" class="ptime">00:00:00/00:00:00</p><br/>
<p id="progress" class="progress">
<p id="schedule" class="schedule"></p>
</p>
<br/>
<p class="stop" onclick="stopPlay();outSet('停止播放!');"></p>
</p>
<p id="record" class="rp">
<p style="width:100%;height:20%;"></p>
<p class="rprogress">
<p class="rschedule"></p>
</p>
<br/>
<p id="rtime" class="rtime">00:00:00</p><br/>
<p class="stop" onclick="stopRecord();"></p>
</p>
</body>
<script type="text/javascript" src="../js/immersed.js"></script>
</html>
學(xué)習(xí)是最好的投資!
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號