摘要：具體請(qǐng)看我在提問里的回答下載七牛云文件間歇性失敗總結(jié)至此，在微信開發(fā)中關(guān)于錄音這一塊兒的功能，就已經(jīng)介紹完畢。

原文是在我自己博客中，小伙伴也可以點(diǎn)閱讀原文進(jìn)行跳轉(zhuǎn)查看，還有好聽的背景音樂噢~

????一年的時(shí)間里，前前后后都在搞微信開發(fā)的相關(guān)模塊，這不前一陣子，公司又開了個(gè)新項(xiàng)目，其中有一個(gè)就是類似于微信朋友圈的功能（我也不知道為啥要開發(fā)微信已有的功能啊，淚奔...），其中包含上傳圖片、錄音、視頻等，由于微信端上傳圖片和視頻這塊也是頭一遭做，圖片采用了微信的相關(guān)插件，視頻嘛用的是百度的webupload插件，感覺也相當(dāng)不錯(cuò)，采用了分片上傳技術(shù)。今天這篇就主要介紹一下，錄音的相關(guān)功能。

微信錄音這塊，其實(shí)面對(duì)這項(xiàng)功能的時(shí)候，不用我多說，都知道要先去看開發(fā)文檔，查閱相關(guān)資料等準(zhǔn)備工作；我先貼個(gè)地址，免得看我這篇文檔的時(shí)候再去查找網(wǎng)頁(yè)：微信公眾號(hào)開發(fā)-微信JS-SDK說明文檔。進(jìn)入到這個(gè)頁(yè)面找到第5小節(jié)，音頻接口這里，就是本篇要說的東西了。

微信錄音分為如下幾個(gè)接口（這里歸納一下，文檔里有，詳細(xì)內(nèi)容自己去看吧）：

開始錄音接口

停止錄音接口

監(jiān)聽錄音自動(dòng)停止接口

播放語(yǔ)音接口

暫停播放接口

停止播放接口

監(jiān)聽語(yǔ)音播放完畢接口

上傳語(yǔ)音接口

下載語(yǔ)音接口

看到以上，是不是覺得蠻多的，配合起來使用才提供了這么一個(gè)完整（好像也并不怎么完整，沒有提供方便的轉(zhuǎn)碼及下載本地機(jī)制）的錄音功能。好話說在前頭：你弄完了當(dāng)你再去看這塊代碼的時(shí)候，發(fā)現(xiàn)還真他娘的亂啊。。。所以，我寫這篇記錄的原因就在這里了，狗頭.png

還有一個(gè)就是接口權(quán)限（一張圖片來表述，圖片來源微信文檔...）：

本章會(huì)以文字和代碼的形式進(jìn)行梳理，過程應(yīng)該會(huì)蠻多的，不過看完之后直接拿去使用，問題也應(yīng)該不大，如是說道。

JS-SDK庫(kù)的使用步驟，這里就不過多介紹了，文檔里也有，也是簡(jiǎn)單整理下幾個(gè)所需步驟吧：

綁定域名

引入JS文件

config接口注入權(quán)限驗(yàn)證配置

ready接口處理成功驗(yàn)證

error接口處理失敗驗(yàn)證

我們直接從注入API列表說起，config接口有如下幾個(gè)屬性（不知道屬性是否合適，姑且叫為屬性吧），

/**
 * 微信jssdk調(diào)用接口初始化
 */
wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
    appId: "", // 必填，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: , // 必填，生成簽名的時(shí)間戳
    nonceStr: "", // 必填，生成簽名的隨機(jī)串
    signature: "",// 必填，簽名
    jsApiList: [
        "startRecord", // 錄音開始api
        "stopRecord",  // 錄音結(jié)束api
        "uploadVoice", // 上傳錄音api
        "onVoiceRecordEnd", // 超過一分鐘自動(dòng)停止api
        "playVoice", // 播放錄音api
        "pauseVoice", // 暫停錄音api
        "onVoicePlayEnd", // 監(jiān)聽語(yǔ)音播放完畢api
    ]
});

代碼中的jsApiList就是錄音功能所用到的所有接口了。其他幾個(gè)屬性的值，就不介紹如何生成的了，調(diào)用jssdk的類庫(kù)，通過公眾號(hào)的appid和secret就能獲取到。嗯...還是貼下這部分的代碼吧：

// 引入jssdk庫(kù)
require_once APPPATH . "libraries/weixin/jssdk.php";
// 傳入appid和secret實(shí)例化jssdk類
$JsSdk = new JSSDK("wxa318c6979e231ffa", "301d8f04a0f2ba3098135a162165c991");
// 得到相關(guān)時(shí)間戳和隨機(jī)字符串
$data["signPackage"] = $JsSdk->getSignPackage();
// 獲取當(dāng)前頁(yè)面url
$data["signPackage"]["url"] = explode("?", $data["signPackage"]["url"])[0];

注意：調(diào)用JSSDK類的時(shí)候，會(huì)在項(xiàng)目根目錄下生成兩個(gè)文件access_token.php和jsapi_ticket.php，里面放的是過期時(shí)間和token、ticket值。

ready注冊(cè)錄音播放結(jié)束監(jiān)聽事件：

wx.ready(function(){
    // 監(jiān)聽事件一開始就加載
    wx.onVoicePlayEnd({
        success: function (res) {
            layer.msg("播放完畢"); // 這里用了layer彈框
        }
    });
});

本小節(jié)主要是關(guān)于錄音事件的介紹，代碼行中的注釋應(yīng)該寫的很清楚，不清楚的留言問吧：

// 聲明一個(gè)錄音數(shù)組 以存放錄音臨時(shí)ID
var voice = {
    localId: []
};

// 手指按下錄音鍵
$("#micb").on("touchstart", function(event){
    // 取消事件的默認(rèn)動(dòng)作
    event.preventDefault();
    // 賦值當(dāng)前的錄音開始時(shí)間戳到全局變量
    START = new Date().getTime();

    recordTimer = setTimeout(function(){
        // 錄音開始
        wx.startRecord({
            success: function(){
                // 錄音不能超過一分鐘 超過一分鐘自動(dòng)停止 并觸發(fā)該事件
                wx.onVoiceRecordEnd({
                    // 錄音時(shí)間超過一分鐘沒有停止的時(shí)候會(huì)執(zhí)行 complete 回調(diào)
                    complete: function (res) {
                        // 給出提示
                        layer.msg("最多只能錄制一分鐘", {icon:2, time:1000});
                        // 記錄錄音的臨時(shí)ID
                        voice.localId = res.localId;
                        uploadVoice();
                    }
                });
            },
            cancel: function () {
                alert("用戶拒絕授權(quán)錄音");
            }
        });
    },300);
});

// 松手結(jié)束錄音
$("#micb").on("touchend", function(event){
    event.preventDefault();
    // 獲取錄音停止時(shí)間戳
    END = new Date().getTime();
    // 獲取錄音總時(shí)長(zhǎng)
    duration = END - START;
    // 如果小于300ms則視為時(shí)間太短 拋出提示
    if(duration < 300){
        END   = 0;
        START = 0;
        layer.msg("時(shí)間太短", {icon:2, time:1000});
        //小于300ms，不錄音
        clearTimeout(recordTimer);
    }else{
        wx.stopRecord({
          success: function (res) {
            voice.localId = res.localId;
            // 上傳錄音
            uploadVoice();
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
    }
});

// 上傳錄音
function uploadVoice() {
    // 調(diào)用微信的上傳錄音接口把本地錄音先上傳到微信的服務(wù)器
    // 不過，微信只保留3天，而我們需要長(zhǎng)期保存，我們需要把資源從微信服務(wù)器下載到自己的服務(wù)器
    wx.uploadVoice({
        localId: voice.localId, // 需要上傳的音頻的本地ID，由stopRecord接口獲得
        isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
        success: function (res) {
            // 把錄音在微信服務(wù)器上的id（res.serverId）發(fā)送到自己的服務(wù)器供下載。
            $.ajax({
                url: "down_file.php",
                type: "post",
                data: {serverId: res.serverId},
                dataType: "json",
                success: function (data) {
                    if(data.status == 200) {
                        layer.msg("語(yǔ)音保存成功", {icon:1, time:2000});
                    }
                },
                error: function (xhr, errorType, error) {
                    console.log(error);
                }
            });
        }
    });
}

/**
 * 播放音頻
 */
function playVoice()
{
    wx.playVoice({
        localId: voice.localId // 需要播放的音頻的本地ID，由stopRecord接口獲得
    })
}

以上就是微信錄音在前端的JS代碼，接下來說明服務(wù)器（PHP）端下載錄音到本地的代碼，下載代碼具體在download_media()方法中，其他都是一些輔助方法：

input->post("serverId");
        if ($media_id) {
            // 獲取access_token
            $access_tokens = $this->getWechatAccessToken();
            
            // 下載素材接口
            $down_media_url   = "https://api.weixin.qq.com/cgi-bin/media/get";
            /**
             * 根據(jù)access_tokens獲取素材
             */
            $get_media_url = $down_media_url . "?access_token=" . $access_tokens . "&media_id=" . $media_id;

            // 獲取文件流
            $file_flow = file_get_contents($get_media_url);

            // 本地保存目錄
            $save_path = "resource/uploads/";

            if( !is_dir($save_path) ) {
                mkdir(iconv("UTF-8", "GBK", $save_path), 0777, TRUE);
            }

            // 生成文件名
            $filename = $this->msectime() . $this->salt(6) . ".amr";

            // 寫入文件流到本地
            $flag     = file_put_contents($save_path . "/" . $filename, $file_flow);

            unset($file_flow);
            if($flag !== FALSE) {
                return $save_path . "/" . $filename;
            }else {
                return FALSE;
            }
        }
    }
}

由于微信保存錄音的格式.amr，所以下載的時(shí)候只能下載amr格式的音頻，強(qiáng)行下載成MP3格式的話，播放可能會(huì)出現(xiàn)一些問題，接下來就說下轉(zhuǎn)碼的幾種方式；

FFmpeg是一套可以用來記錄、轉(zhuǎn)換數(shù)字音頻、視頻，并能將其轉(zhuǎn)化為流的開源計(jì)算機(jī)程序。FFmpeg在Linux平臺(tái)下開發(fā)，但它同樣也可以在其它操作系統(tǒng)環(huán)境中編譯運(yùn)行，包括Windows、Mac OS X等?！獊碜园俣鹊慕榻B。

通過這個(gè)網(wǎng)址下載ffmpeg.exe程序 https://ffmpeg.zeranoe.com/bu...，選擇shared這個(gè)類型，如下圖：

下載完成后，解壓在bin目錄可以看到ffmpeg.exe

cmd命令行轉(zhuǎn)碼：
直接切換到ffmpeg.exe的目錄，在命令行輸入

ffmpeg.exe -i E:wodeffmpegamr.amr E:wodeffmpegarm.mp3

即可，就可以看到整個(gè)轉(zhuǎn)碼的過程。下圖所示：

php轉(zhuǎn)碼：
那么如何利用php來調(diào)用exe軟件來進(jìn)行轉(zhuǎn)碼呢？很方便的是php提供了相應(yīng)的函數(shù)，exec和system，他們都可以調(diào)用cmd的命令，比如調(diào)用ffmpeg.exe來進(jìn)行轉(zhuǎn)碼：

exec("E:wodeffmpeginffmpeg.exe -i E:wodeffmpegamr.amr E:wodeffmpegexec.mp3");

就是這么簡(jiǎn)單了。當(dāng)然ffmpeg也支持其他格式的轉(zhuǎn)碼，音頻、視頻等都可以。

PS：會(huì)把測(cè)試的amr文件貼在下面的資源節(jié)里，有需要的小伙伴可以下載測(cè)試，因?yàn)楝F(xiàn)在的amr格式的文件都挺難找的，別問我怎么知道的....

除了通過php外部命令調(diào)用軟件進(jìn)行轉(zhuǎn)碼之外，還可以通過第三方平臺(tái)實(shí)現(xiàn)轉(zhuǎn)碼操作，這里就舉例七牛云，首先貼兩個(gè)鏈接：

七牛開發(fā)者SDK列表

七牛文件上傳說明

上面的的一個(gè)鏈接里顯示的是七牛官方所有的SDK文檔列表，可以根據(jù)后端語(yǔ)言的不同進(jìn)行選擇查看；第二個(gè)鏈接就是本小節(jié)要說的利用七牛云上傳文件。下面來瞧一下代碼，也同樣封裝成類的形式：

 "", // 配置七牛AccessKey
        "SecretKey"      => "", // 配置七牛SecretKey
        "bucket"         => "cxiansheng", // 七牛的存儲(chǔ)空間名，我的是cxiansheng
        "voice-pipeline" => "cxiansheng", // 設(shè)置轉(zhuǎn)碼隊(duì)列名
        "voice-domain"   => "http://***.com/" // 你的CDN加速域名 上傳文件成功后通過這個(gè)域名+文件名就可以訪問到相應(yīng)的資源
    ];

    /**
     * 上傳微信錄音文件到七牛并轉(zhuǎn)碼mp3
     * @param  string $trans_ext  本地文件路徑
     */
    public function upload_qiniu($file_path)
    {
        // 獲取七牛auth對(duì)象
        $auth = new Auth($this->qiniu["AccessKey"], $this->qiniu["SecretKey"]);

        // 定義轉(zhuǎn)碼后的mp3文件名
        $qiniu_filename = "qiniu" . $this->msectime() . $this->salt(6) . ".mp3";

        // 指定上傳文件成功后的后續(xù)處理 這里為轉(zhuǎn)碼操作
        $savekey = Qiniuase64_urlSafeEncode($this->qiniu["bucket"] . ":" . $qiniu_filename);
        $fops    = "avthumb/mp3/ab/128k/ar/44100/acodec/libmp3lame|saveas/" . $savekey;
        /**
         * 設(shè)置轉(zhuǎn)碼格式和轉(zhuǎn)碼隊(duì)列名
         */
        $policy   = [
            "persistentOps"      => $fops,
            "persistentPipeline" => $this->qiniu["voice-pipeline"]
        ];
        /**
         * 設(shè)置上傳到七牛的原始amr臨時(shí)文件名
         * @var string
         */
        $qiniu_tmp_filename = "originamrtmp.amr";

        // 獲取上傳token
        $uptoken = $auth->uploadToken($this->qiniu["bucket"], null, 3600, $policy);

        // 調(diào)用上傳類
        $uploadMgr = new UploadManager();
        // 調(diào)用 UploadManager 的 putFile 方法進(jìn)行文件的上傳。
        list($ret, $err) = $uploadMgr->putFile($uptoken, $qiniu_tmp_filename, $file_path);

        // 資源管理類
        $bucketMgr = new BucketManager($auth);
        if($ret["key"]) {
            // 刪除原始amr臨時(shí)文件
            $err = $bucketMgr->delete($this->qiniu["bucket"], $ret["key"]);
            unlink($file_path); //刪除服務(wù)器上的amr文件

            // 返回在七牛上的資源路徑
            return $this->qiniu["voice-domain"] . $qiniu_filename;
        }else {
            return FALSE;
        }
    }
}

上面的代碼應(yīng)該不用我做過多介紹，里面的注釋每一步應(yīng)該都寫得很清楚。

PS：在通過第三方轉(zhuǎn)碼的時(shí)候，調(diào)用api成功之后，由于要待轉(zhuǎn)碼的文件一般都會(huì)處于轉(zhuǎn)碼隊(duì)列中，可能還沒有立即轉(zhuǎn)碼成功我們想要的文件。所以不能根據(jù)轉(zhuǎn)碼過后的文件名去下載，需要等待一會(huì)兒，或者可以先把轉(zhuǎn)碼后的文件名保存在數(shù)據(jù)庫(kù)中，用定時(shí)任務(wù)去下載到本地。具體請(qǐng)看我在SF提問里的回答--下載七牛云mp3文件間歇性失敗

至此，在微信開發(fā)中關(guān)于錄音這一塊兒的功能，就已經(jīng)介紹完畢。如果有寫錯(cuò)的地方，歡迎拍磚。同樣看完還不是很理解的朋友，也可以留言。
以上。

composer安裝PHP-FFmpeg

ffmpeg-php擴(kuò)展

微信jssdk錄音功能開發(fā)記錄

amr格式文件

其他另外兩篇自己關(guān)于微信開發(fā)的總結(jié)推薦：

微信開發(fā)之微信公眾號(hào)支付

微信開發(fā)之微信登錄