Example of the PHP version of the JS-SDK audio interface

Source: Internet
Author: User
Tags min openid ticket


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)

Recording effect chart (first pop-up prompts to authorize)

Upload the effect chart:

Upload and send customer service message effect chart:

Finally in the service number to see the effect of the picture (note that the longest 60 seconds, it will only show 1″, but does not affect the length of the recording you play)

Well, what to say to me, experience, the mouth of mercy Ah!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.