I would like this interface is very simple do not want to write, because look at the document it is similar to the image interface. But for the new js-sdk friends. Because some people in the group said the recording can not be forwarded to the user, the test is entirely possible, but the time is not correct. Displays 1 seconds, but does not affect the playback length. example, I use Ajax submitted upload media_id, and write a fixed open_id to the background, call the customer service interface issued, pay attention to 48 hours! This means that after converting the local localid to ServerID, it can be passed back to its own server, because the micro-trust server is only stored for 3 days and continues to use TP as a framework.
The first is layout\record.phtml:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<link href= "__public__/css/bootstrap.min.css" rel= "stylesheet"/>
<body>
{__content__}
</body>
<script type= "Text/javascript" >
Window.jquery | | document.write ("<script src= ' __public__/js/jquery-1.10.2.min.js ' >" + "<" + "/script>");
</script>
<script src= "Http://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>
<script>
Wx.config ({
Debug:false,
AppId: ' {$signPackage [' appId ']} ',
Timestamp: {$signPackage ["timestamp"]},
Noncestr: ' {$signPackage [' noncestr ']} ',
Signature: ' {$signPackage [' signature ']} ',
Jsapilist: [
' Checkjsapi ',
' Startrecord ',
' Stoprecord ',
' Onvoicerecordend ',
' Playvoice ',
' Pausevoice ',
' Stopvoice ',
' Onvoiceplayend ',
' Uploadvoice ',
' Downloadvoice ',
' Getnetworktype '
]
});
Wx.ready (function () {
var record = {
Localid: ',
ServerID: '
};
Wx.getnetworktype ({
Success:function (res) {
var networktype = Res.networktype; Return network type 2g,3g,4g,wifi
JQuery (function () {
$ (' #networkType '). HTML (networktype);
});
}
});
Document.queryselector (' #record '). onclick = function () {
$ ("#record H2"). html (' recording ... ');
Wx.startrecord ();
};
Document.queryselector (' #stoprecord '). onclick = function () {
Wx.stoprecord ({
Success:function (res) {
Record.localid = Res.localid;
$ ("#record H2"). HTML (' start recording ');
}
});
};
Wx.onvoicerecordend ({
Complete:function (res) {
Record.localid = Res.localid;
$ ("#record H2"). HTML (' start recording ');
}
});
Wx.onvoiceplayend ({
Success:function (res) {
Record.localid = Res.localid; Returns the local ID of the audio
Alert (' play completed ');
}
});
Document.queryselector (' #playrecord '). onclick = function () {
if (Record.localid = = "") {
Alert (' You haven't recorded yet ');
Return
}
Wx.playvoice ({
LocalId:record.localId
});
};
Document.queryselector (' #uploadrecord '). onclick = function () {
if (Record.localid = = "") {
Alert (' You haven't recorded Localid ');
Return
}
Wx.uploadvoice ({
LocalId:record.localId,
Isshowprogresstips:1,
Success:function (res) {
Record.serverid = Res.serverid;
$.getjson (' Http://www.demo.com/tp/home/index/sendrecord ', {openid: ' Ohdugj7hzfjfr4ilmb5rgctpnrow ', media_id: Record.serverid}, function (data) {
if (data)
Alert (' send Success ');
});
}
});
};
Document.queryselector (' #downloadrecord '). onclick = function () {
if (Record.serverid = = "") {
Alert (' You haven't uploaded the recording yet ');
Return
}
Wx.downloadvoice ({
ServerId:record.serverId,
Isshowprogresstips:1,
Success:function (res) {
Record.localid = Res.localid;
alert (record.localid);
}
});
};
});
Wx.error (function (res) {
var str = res.errmsg;
var reg =/invalid signature$/;
var r = Str.match (reg);
if (r!== null) {
JQuery (function () {
$.getjson (' Http://www.demo.com/tp/home/index/ticket ', function (data) {
if (data) {
Alert (' Ticket update ');
location = location;
Window.navigate (location);
}
});
});
}
});
</script>
View views\index\record.phtml
<style>
. text-center {Text-align:center}
. btn-hight {height:100px;width:230px}
#img img{width:200px;}
</style>
<div class= "col-lg-12 col-sm-12" style= "margin:12px auto 10px;" >
<div class= "Form-group text-center" >
</div>
<div class= "Form-group text-center" >
<button id= "Record" type= "button" class= "btn btn-primary btn-hight" ></div>
<div class= "Form-group text-center" >
<button id= "Stoprecord" type= "button" class= "btn btn-warning btn-hight" ></div>
<div class= "Form-group text-center" >
<button id= "PlayRecord" type= "button" class= "btn btn-primary btn-hight" ></div>
<div class= "Form-group text-center" >
<button id= "Pauserecord" type= button "class= btn btn-success btn-hight" ></div>
<div class= "Form-group text-center" >
<button id= "Uploadrecord" type= "button" class= "btn btn-danger btn-hight" ></div>
<div class= "Form-group text-center" >
<button id= "Downloadrecord" type= "button" class= "btn btn-info btn-hight" ></div>
</div>
Controller to join the method:
Public Function recordaction () {
Layout (' Layout\record ');
$this->display ();
}
Public Function sendrecordaction () {
if (Is_ajax) {
$openid = I (' OpenID ', ');
$media _id = I (' media_id ', ');
$res = $this->api->call ('/message/custom/send ', Array (
' Touser ' => $openid,
' Msgtype ' => ' voice ',
' Voice ' => Array (' media_id ' => $media _id),
), Wechatjsapi::json);
if ($res)
$this->ajaxreturn (TRUE);
$this->ajaxreturn (FALSE);
}
}
Recording effect chart (first pop-up prompts to authorize)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
