首先整理一下思路：
1、认证后的微信公众号，设置项目域名绑定为微信JS安全域
2、使用微信JS编写录音事件，包括开始录音、停止录音、上传录音、服务器保存录音
3、后台负责微信JS签名生成，从微信服务器上下载录制好的音频
4、录音格式为amr文件，使用amr.js编码在线播放

微信开发文档地址：https://mp.weixin.qq.com/wiki

第一步，设置微信公众号JS安全域

配置JS安全域.png

需要下载JS安全域凭证文件放在安全域名的根目录下。

第二步，微信JS签名生成
@微信要求生成签名的逻辑必须在服务端完成
签名算法：（jsapi_ticket的获取方式参考微信开发文档）
jsapi_ticket（微信JS接口凭证）+noncestr（服务端生成随机字符串）+timestamp（请求时间戳）+url（请求页面的地址）
①将这些参数名进行ASCII码从小到大排序 sort(array $data);
②按照（key1=value1&key2=value2&key3...）格式组装成字符串
③对字符串sha1加密获得 signature $signature = sha1($str);
注意：access_token 与 jsapi_ticket 的有效时间为7200s，重新获取会生成新的凭证覆盖并消耗微信接口请求次数，注意缓存。

附上签名生成demo：

<?php
/*
 * curl
 */
function http_exec($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $res = curl_exec($ch);
    curl_close($ch);
    return $res;
}
/*
    生成随机字符串
 */
function create_random($length = 6){
    $rand = ''; 
    for ($i = 0; $i < $length; $i++) 
    { 
        $rand .= chr(mt_rand(65, 90)); 
    } 
    return $rand; 
}

$app_id = "微信公众号获取";
$app_secret = "微信公众号获取";

//获取access_token
$access_token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$app_id}&secret={$app_secret}";
$access_token = json_decode(http_exec($access_token_url),true);
//获取ticket
$ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token['access_token']}&type=jsapi";
$ticket = json_decode(http_exec($ticket_url),true);
//获取随机字符串
$noncestr = create_random(8);
//请求地址
$url = "6.48947.com/weixinjs/JSSDK.html";
$time = time();
//参数列表
$data = array(
    "jsapi_ticket=" .   $ticket['ticket'],
    "noncestr=" . $noncestr,
    "timestamp="    .   $time,
    "url="  .   $url
    );
//组装加密字符串
$sign_data = "";
sort($data);
foreach ($data as $value) {
    $sign_data .= $value ."&";
}
$sign_data = substr($sign_data,0,-1);
//加密
$sign = sha1($sign_data);


echo $sign;

第三步，页面配置微信JS

引入微信JS
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

开启微信JS组件

  $.post("./sign.php","url="+window.location.href,function(res){
            token = res.token;
            wx.config({
                debug: true,//true显示提示消息，false隐藏提示消息 
                appId: res.appid,
                timestamp: res.timestamp,
                nonceStr: res.noncestr,
                signature: res.sign,
                jsApiList: ['startRecord','stopRecord','uploadVoice','downloadVoice']  //接口列表
            });
            //微信JS接口准备就绪时，所有接口逻辑在此方法内实现
            wx.ready(function(){

                $("#radio_start").on("click",function(event){//开始录音
                    wx.startRecord({
                            success: function(){
                                localStorage.rainAllowRecord = 'true';
                            },
                            cancel: function () {
                                alert('not radio driver');
                            }
                        });
                });
                $("#radio_stop").on("click",function(event){//结束录音
                    wx.stopRecord({
                          success: function (res) {
                                localId = res.localId;
                                //locaId为本地语音标识
                                radio_file_up();
                                $("#radio_stop").append("<p data="+localId+" >¼Òô"+localId+"</p>");
                          },
                          fail: function (res) {
                                alert(JSON.stringify(res));
                          }
                        });

                });
            });
            wx.error(function(res){
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                console.log(res);
            });
                
        },"json");      

上传语音文件到微信服务器（微信服务器只对文件保存两天，上传成功后下载到服务器保存）

function radio_file_up(){
    wx.uploadVoice({
    localId: localId, // 本地微信语音文件标识
    isShowProgressTips: 1, // 开启上传提示
    success: function (res) {
     //上传成功后从微信服务器下保存
               
    var url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="+token+"&media_id="+res.serverId;
    // $.post("./download.php","url="+url,function(res){
    //      alert("上传成功");
    // },"json");
    }, 
    error:function(res){
        alert(res);
    }
    });
}

第四步，服务器保存语音文件

<?php       
$url = $_POST["url"];
$str = date('YmdHis').time().'.amr';//微信录音文件名 扩展名为 .amr
$targetName =  './'.$str;   //保存目录
downAndSaveFile($url,$targetName); //保存
echo 1;

//根据URL地址，下载文件
function downAndSaveFile($url,$savePath){
    ob_start();
    readfile($url);
    $img  = ob_get_contents();
    ob_end_clean();
    $size = strlen($img);
    $fp = fopen($savePath, 'a');
    fwrite($fp, $img);
    fclose($fp);
}
die();

第五步，如何在web播放amr格式的音频文件

一共发现了三个方案：
① 使用apple的quickTimePlayer播放器的插件实现播放
② 将amr文件进行base64转码播放，有flash实现和amr插件播放实现
因为时间紧张的原因选择最简单的amr转码播放的方法

参考技术博客：http://www.cnblogs.com/yuhongda0315/p/5224064.html
使用amr.js开源库 git地址：https://github.com/jpemartins/amr.js
demo下载地址：http://pan.baidu.com/s/1cEojoi

功能实现后发现的问题

1、微信JS签名生成时要注意请求发送的url是否正确，微信公众号上下载的凭证文件没有放在根目录下也会提示签名错误。
2、调试使用微信web开发者工具会提高效率
3、录音文件经过base64转码amr.js播放后音频会有一定比例损失，后期再仔细研究amr.js无损方法。