前两天刚整理了一个关于微信开发录音功能的开发步骤,网上这方面资料已经很多了,写下来就当作自己的笔记。


一.  首先需要在微信公众号中进行配置(其中Token为自定义项)

android 仿微信长按录音按钮 微信长录音怎么制作_javascript

二. 在配置的域名文件夹下放置checkwei.php文件,用来验证配置是否成功。如下:



<?php
header('Content-type:text');
define("TOKEN", "weixin");
$wechatObj = new wechatCallbackapiTest();
if (isset($_GET['echostr'])) {
    $wechatObj->valid();
}else{
    $wechatObj->responseMsg();
}

class wechatCallbackapiTest
{
    public function valid()
    {
        $echoStr = $_GET["echostr"];
        if($this->checkSignature()){
            header('content-type:text');
            echo $echoStr;
            exit;
        }
    }

    private function checkSignature()
    {
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce = $_GET["nonce"];

        $token = TOKEN;
        $tmpArr = array($token, $timestamp, $nonce);
        sort($tmpArr, SORT_STRING);
        $tmpStr = implode( $tmpArr );
        $tmpStr = sha1( $tmpStr );

        if( $tmpStr == $signature ){
            return true;
        }else{
            return false;
        }
    }
}

三.配置js接口安全域名,配置后公众号开发者可在该域名下调用微信开放的JS接口

android 仿微信长按录音按钮 微信长录音怎么制作_javascript_02

按照提示进行第三部操作:


android 仿微信长按录音按钮 微信长录音怎么制作_android 仿微信长按录音按钮_03


四.准备jssdk文件,现已经整理出一个分享的js_sdk包,所以前端同事在做的项目中直接引入这个封装好的包就行,jssdk包无需做任何修改!

(1)前端同事写的页面后缀多为.html或.shtml文件,需将页面的后缀改为.php ,因为在页面中需要嵌入PHP的代码,若是.html,.shtml后缀则无法解析。(该方法比较笨,因为我做的时候用的就是简单的一个页面所以就这样做了)

(2)引入一小段php文件,必须在文件开头引入,因为php规定require一个文件前面不能有任何输出。代码实例如下:

<?php
require_once "jssdk.php";
$jssdk=new JSSDK
 ("wx****************a","86****************************67");
$signPackage =$jssdk->GetSignPackage();
?>




五.这次主要做的是一个关于微信录音,将录音资源从微信服务器下载到本地服务器的一个过程。不过先将获取用户信息这个步骤代码贴出来:

1.

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx***********************291&redirect_uri=http://www.demo.com/index.php/Ch/Cms/Uploadwxvoice/index&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect



2.//通过授权获取用户的信息


public function index(){
			$appid = "wx*********291"; 
			$secret = "eb************************23eb2";
			$code = $_GET["code"]; 
			
			//使用code换取oauth2的授权access_token
			$token_obj = json_decode(file_get_contents('https://api.weixin.qq.com/sns/oauth2/access_token?appid=’.$appid.’ &secret=’.$secret.’ &code='.$code.'&grant_type=authorization_code'));
			$access_token = $token_obj->access_token;
			$openid = $token_obj->openid;
			
			//使用授权Access Token和openid获取用户信息`
			$user_obj = json_decode(file_get_contents('https://api.weixin.qq.com/sns/userinfo?access_token='.$access_token.'&openid='.$openid.'&lang=zh_CN'));
			
			//将相关信息存储进session
			$_SESSION['openid'] = $user_obj->openid;
			$_SESSION['nickname'] = $user_obj->nickname;
			$_SESSION['headimgurl'] = $user_obj->headimgurl;
		
			$this->display();
			
	}



六.接下来可以进行调用接口开发。首先配置config项,注册需要调用的接口,

         注意:需要先引入微信js文件


android 仿微信长按录音按钮 微信长录音怎么制作_thinkphp_04




<script>
    //微信分享
    // var share_image = "";
    // var share_link = "";
    // var share_desc = '';
    // var share_title = '部落PK联盟';
    wx.config({
        debug: false,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
            signature: '<?php echo $signPackage["signature"];?>',
            jsApiList: [
        // 所有要调用的 API 都要加到这个列表中
        'onMenuShareAppMessage',//分享朋友
        'onMenuShareTimeline',///分享朋友圈
        'startRecord',//开始录音
		'stopRecord',//停止录音
		'onVoiceRecordEnd',//监听录音自动停止接口
		'playVoice',//播放录音
		'pauseVoice',//暂停云隐接口
		'stopVoice',//停止播放
		'onVoicePlayEnd',//
		'uploadVoice',//上传语音
		'downloadVoice'//下载语音
    ]
    });
    wx.ready(function () {
	
	
		//朋友圈
		wx.onMenuShareTimeline({
			title:' ',//标题
			link:'',//链接
			imgUrl:'',//图片
			success:function(){

			},
			cancle:function(){

			}



		});

		//朋友
		wx.onMenuShareAppMessage({
			title:' ',
			desc:' ',//描述
			link:'',
			imgUrl:'',
			type:'',//分享类型music  不填默认是link
			dataUrl:'',//如过类型是music  video  需要填写链接  默认为空
			success:function(){

			},
			cancle:function(){

			}



		});
	if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){
    wx.startRecord({
        success: function(){
            localStorage.rainAllowRecord = 'true';
            wx.stopRecord();
        },
        cancel: function () {
            alert('用户拒绝授权录音');
        }
    });
}

        // 4 音频接口
  // 4.2 开始录音
  document.querySelector('#startRecord').onclick = function () {
	 START = new Date().getTime();

    recordTimer = setTimeout(function(){
        wx.startRecord({
            success: function(){
                localStorage.rainAllowRecord = 'true';
				alert('true');
            },
            cancel: function () {
                alert('用户拒绝授权录音');
            }
        });
    },300);
  };
var voice = {
localId: '',
serverId: ''
};
  // 4.3 停止录音
  document.querySelector('#stopRecord').onclick = function () {
   END = new Date().getTime();
    
    if((END - START) < 300){
        END = 0;
        START = 0;
        //小于300ms,不录音
        clearTimeout(recordTimer);
    }else{
        wx.stopRecord({
          success: function (res) {  
          voice.localId = res.localId;
          //uploadVoice();	
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          }
        });
    }
  };
  
  // 4.4 监听录音自动停止
  wx.onVoiceRecordEnd({
    complete: function (res) {
      voice.localId = res.localId;
      alert('录音时间已超过一分钟');
    }
  });

  // 4.5 播放音频
  document.querySelector('#playVoice').onclick = function () {
    if (voice.localId == '') {
      alert('请先使用 startRecord 接口录制一段声音');
      return;
    }
    wx.playVoice({
      localId: voice.localId
    });
  };

  // 4.6 暂停播放音频
  document.querySelector('#pauseVoice').onclick = function () {
    wx.pauseVoice({
      localId: voice.localId
    });
  };

  // 4.7 停止播放音频
  document.querySelector('#stopVoice').onclick = function () {
    wx.stopVoice({
      localId: voice.localId
    });
  };

  // 4.8 监听录音播放停止
  wx.onVoicePlayEnd({
    complete: function (res) {
      alert('录音(' + res.localId + ')播放结束');
    }
  });

  // 4.8 上传语音
  document.querySelector('#uploadVoice').onclick = function () {
    if (voice.localId == '') {
      alert('请先使用 startRecord 接口录制一段声音');
      return;
    }
   wx.uploadVoice({
    localId: voice.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
    isShowProgressTips: 1, // 默认为1,显示进度提示
        success: function (res) {
        var serverId = res.serverId; // 返回音频的服务器端ID
		alert(serverId);
		 $.ajax({
                url: '/index.php/Ch/Cms/Uploadwxvoice/upload',//通过ajax请求后台进行语音资源向本地服务器下载的操作
                type: 'POST',
               data : { serverId : serverId },
                dataType: "html",
                success: function (data) {
                    alert('OK');
					console.log(data);
                },
                error: function (xhr, errorType, error) {
                    console.log(error);
                }
            });
    }
	});
  };

  // 4.9 下载语音
  document.querySelector('#downloadVoice').onclick = function () {
    if (voice.serverId == '') {
      alert('请先使用 uploadVoice 上传声音');
      return;
    }
    wx.downloadVoice({
      serverId: voice.serverId,
      success: function (res) {
        alert('下载语音成功,localId 为' + res.localId);
        voice.localId = res.localId;
      }
    });
  };
    });
wx.error(function (res) {
  alert(res.errMsg);
});
</script>


七.第六步中的 Uploadwxvoice()   方法代码如下:

//上传操作,将微信服务器上的文件下载到本地服务器
    public function upload(){
		$model = M('wxly');
		//media_id(serverId)为微信jssdk接口上传后返回的媒体id
        $media_id = $_POST['serverId'];
		
		$token_data = json_decode(file_get_contents("./luyin/access_token.json"));
        $access_token = $token_data->access_token;

		$path = "./Wxupload/";   //保存路径,相对当前文件的路径
		 if(!is_dir($path)){
			mkdir($path);
		}
			
		//微 信上传下载媒体文件
		$url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$media_id}";
		
		
		$filename = $media_id.".amr";//下载下来的文件名字,前缀可自定义,在此步骤后可将下载的资源上传七牛云进行转码为 .MP3 再次下载操作,功能不需要可忽略
			
		$filepath = $path.$filename;
	
		
		ob_start();
		readfile($url);
		$img  = ob_get_contents();
		ob_end_clean();
		$size = strlen($img);
		$fp = fopen($path."/".$filename, 'a');
		fwrite($fp, $img);
		fclose($fp);
			
		 
		
		$data['name'] = $name;
		$data['phone'] = $phone;
		$data['source'] = $biaoti;
		$data['attachment'] = $filename;
		$data['zattachment'] = $zfilename;
		$data['openid'] = $_SESSION['openid'];
		$data['nickname'] = $_SESSION['nickname'];
		$data['headimgurl'] = $_SESSION['headimgurl'];
		$data['status'] = 0;
		$data['writetime'] = time();


		// 保存当前数据对象
		if ($result = $model->add($data)) { //保存成功
			echo 'uploadok';
		} else {
			echo 'uploaderror';
		} 
		//echo json_encode($arr);
	}