微信开发 点击录音_微信小程序云开发,在群消息中点击微信小程序获取微信群信息 - CSDN
  • 本文简单说明一下微信测试号分享和录音功能的调用,其他JSSD功能与这类似 参考:微信JS-SDK文档 ...

    本文简单说明一下微信测试号分享和录音功能的调用,其他JSSD功能与这类似

    参考:微信JS-SDK文档

    http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E8.8E.B7.E5.8F.96.E2.80.9C.E5.88.86.E4.BA.AB.E7.BB.99.E6.9C.8B.E5.8F.8B.E2.80.9D.E6.8C.89.E9.92.AE.E7.82.B9.E5.87.BB.E7.8A.B6.E6.80.81.E5.8F.8A.E8.87.AA.E5.AE.9A.E4.B9.89.E5.88.86.E4.BA.AB.E5.86.85.E5.AE.B9.E6.8E.A5.E5.8F.A3

    下载示例代码http://demo.open.weixin.qq.com/jssdk/sample.zip

    解压得到


    打开php文件夹里面有四个文件

     

    先打开jssdk.php,做如下修改,修改说明请见注解

    <?php
    class JSSDK {
      private $appId;
      private $appSecret;
    
      public function __construct($appId, $appSecret) {
        $this->appId = $appId;
        $this->appSecret = $appSecret;
      }
    
      public function getSignPackage() {
        $jsapiTicket = $this->getJsApiTicket();
    
        // 注意 URL 一定要动态获取,不能 hardcode.
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    
        $timestamp = time();
        $nonceStr = $this->createNonceStr();
    
        // 这里参数的顺序要按照 key 值 ASCII 码升序排序
        $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
    
        $signature = sha1($string);
    
        $signPackage = array(
          "appId"     => $this->appId,
          "nonceStr"  => $nonceStr,
          "timestamp" => $timestamp,
          "url"       => $url,
          "signature" => $signature,
          "rawString" => $string
        );
        return $signPackage; 
      }
    
      private function createNonceStr($length = 16) {
        $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        $str = "";
        for ($i = 0; $i < $length; $i++) {
          $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
        }
        return $str;
      }
    
      private function getJsApiTicket() {
        // jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
        $data = json_decode($this->get_php_file("jsapi_ticket.php"));
        if ($data->expire_time < time()) {
          $accessToken = $this->getAccessToken();
          // 如果是企业号用以下 URL 获取 ticket
          // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
          $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
          $res = json_decode($this->httpGet($url));
          $ticket = $res->ticket;
          if ($ticket) {
            $data->expire_time = time() + 7000;
            $data->jsapi_ticket = $ticket;
            $this->set_php_file("jsapi_ticket.php", json_encode($data));
          }
        } else {
          $ticket = $data->jsapi_ticket;
        }
    
        return $ticket;
      }
    
      private function getAccessToken() {
        // access_token 应该全局存储与更新,以下代码以写入到文件中做示例
        $data = json_decode($this->get_php_file("access_token.php"));
        if ($data->expire_time < time()) {
          // 如果是企业号用以下URL获取access_token
          // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
          $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
          $res = json_decode($this->httpGet($url));
          $access_token = $res->access_token;
          if ($access_token) {
            $data->expire_time = time() + 7000;
            $data->access_token = $access_token;
            $this->set_php_file("access_token.php", json_encode($data));
          }
        } else {
          $access_token = $data->access_token;
        }
        return $access_token;
      }
    
      private function httpGet($url) {
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_TIMEOUT, 500);
        // 为保证第三方服务器与微信服务器之间数据传输的安全性,所有微信接口采用https方式调用,必须使用下面2行代码打开ssl安全校验。
        // 如果在部署过程中代码在此处验证失败,请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
        // curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
        // curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
        curl_setopt($curl, CURLOPT_URL, $url);
    
        $res = curl_exec($curl);
        curl_close($curl);
    
        return $res;
      }
    
      private function get_php_file($filename) {
        return trim(substr(file_get_contents("saemc://".$filename), 0));//默认的access_token是从access_token.php的第15位开始获取,因为前面有一段代码**php exit();**,而我们服务器上的access_token是直接显示出来的,所以改成0直接获取
      }
      private function set_php_file($filename, $content) {
        file_put_contents("saemc://".$filename,$content);//对应的文件读取修改
       
      }
    }

    再打开sample.php文件,做如下修改

    <?php
    //外部引用
    
    //二维码生成http://2.weixinbuild.applinzi.com/XXX/sample.php扫码访问
    
    require_once "jssdk.php";
    $jssdk = new JSSDK("appid", "secret");//分别填写appid和secret
    $signPackage = $jssdk->GetSignPackage();
    ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
    
      <br>
      <br>
      <br>
      <button class="start"><h1>开始录音</h1></button>
      <button class="stop"><h1>停止录音</h1></button>
      <button class="play"><h1>播放</h1></button>
    
    
    </body>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
      /*
       * 注意:
       * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
       * 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
       * 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
       *
       * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:
       * 邮箱地址:weixin-open@qq.com
       * 邮件主题:【微信JS-SDK反馈】具体问题
       * 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。
       */
      wx.config({
        debug: true,//开启调试模式
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
          // 所有要调用的 API 都要加到这个列表中
          'onMenuShareAppMessage',
          'startRecord',
          'stopRecord',
          'playVoice',
        ]
      });
      wx.ready(function () {
        var start = document.querySelector(".start");
        var stop = document.querySelector(".stop");
        var play = document.querySelector(".play");
        var localId = null;//用于记录录音ID
        start.onclick = function(){
          wx.startRecord();
        };
        stop.onclick = function(){
          wx.stopRecord({
              success: function (res) {
                localId = res.localId;
              }
          });
        };
        play.onclick = function(){
          wx.playVoice({
              localId: localId // 需要播放的音频的本地ID,由stopRecord接口获得
          });
        };
    
    
        // 在这里调用 API
        wx.onMenuShareAppMessage({
          title: '微信测试', // 分享标题
          desc: '微信测试测试', // 分享描述
          link: 'http://baidu.com', // 分享链接
          imgUrl: 'http://www.dev666.com/dev666/static/images/dev666logo.png', // 分享图标
          type: '', // 分享类型,music、video或link,不填默认为link
          dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
          success: function () { 
              // 用户确认分享后执行的回调函数
          },
          cancel: function () { 
              // 用户取消分享后执行的回调函数
          }
        });
      });
    </script>
    </html>

    以上两端代码放在文件夹XXX中上传值新浪云SAE

    将链接//二维码生成http://2.weixinbuild.applinzi.com/XXX/sample.php生成二维码,用微信客户端扫码后,进入页面,有对应的开始录音,停止录音,播放三个按钮,当点击开始录音后,手机同意获取权限,即可实现了录音功能,当然也可以播放。

     

    点击微信右上角,分享给好友,你的好友收到你的分享点开就是对应的link链接。

    展开全文
  • 如果开发的是普通的展示性页面,就和开发普通的页面没有区别,不过这里要用到设备(手机)的录音功能,就需要调用微信app的录音接口,需要使用微信jssdk。 使用微信jssdk:微信JS-SDK说明文档 先登录微信...

    0.需求描述

    在微信浏览器内打开的页面,制作一个按钮,用户按住按钮后开始录音,松手后停止录音并将录音上传并长期保存。


    1.开发流程

    如果开发的是普通的展示性页面,就和开发普通的页面没有区别,不过这里要用到设备(手机)的录音功能,就需要调用微信app的录音接口,需要使用微信jssdk。

    使用微信jssdk:微信JS-SDK说明文档

    • 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。[需要有微信公众号]
    • 引入JS文件
    • 通过config接口注入权限验证配置
    • 通过ready接口处理成功验证
    • 通过error接口处理失败验证
    //假设已引入微信jssdk。【支持使用 AMD/CMD 标准模块加载方法加载】
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名,见附录1
        jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
    
    wx.ready(function(){
    
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    });
    
    wx.error(function(res){
    
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    
    });

    本次需求核心功能:录音并保存

    //假设全局变量已经在外部定义
    //按下开始录音
    $('#talk_btn').on('touchstart', function(event){
        event.preventDefault();
        START = new Date().getTime();
    
        recordTimer = setTimeout(function(){
            wx.startRecord({
                success: function(){
                    localStorage.rainAllowRecord = 'true';
                },
                cancel: function () {
                    alert('用户拒绝授权录音');
                }
            });
        },300);
    });
    //松手结束录音
    $('#talk_btn').on('touchend', function(event){
        event.preventDefault();
        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));
              }
            });
        }
    });
    
    //上传录音
    function uploadVoice(){
        //调用微信的上传录音接口把本地录音先上传到微信的服务器
        //不过,微信只保留3天,而我们需要长期保存,我们需要把资源从微信服务器下载到自己的服务器
        wx.uploadVoice({
            localId: voice.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
            isShowProgressTips: 1, // 默认为1,显示进度提示
            success: function (res) {
                //把录音在微信服务器上的id(res.serverId)发送到自己的服务器供下载。
                $.ajax({
                    url: '后端处理上传录音的接口',
                    type: 'post',
                    data: JSON.stringify(res),
                    dataType: "json",
                    success: function (data) {
                        alert('文件已经保存到七牛的服务器');//这回,我使用七牛存储
                    },
                    error: function (xhr, errorType, error) {
                        console.log(error);
                    }
                });
            }
        });
    }
    
    //注册微信播放录音结束事件【一定要放在wx.ready函数内】
    wx.onVoicePlayEnd({
        success: function (res) {
            stopWave();
        }
    });

    2.小麻烦

    要防止用户误操作(如:反复点击、误触摸)导致的无效录音。

    小于300ms不录音

    防止用户长按导致的浏览器默认弹出微信浏览器默认的“复制对话框”。

    使用css设置按钮 user-select:none;

    微信播放录音接口事件回调函数无效

    微信注册事件一定要放在wx.ready中。

    阻止默认事件

    touch 事件记得加 event.preventDefault(); 防火防爆

    微信存储静态资源时间为3天,如何长期保存

    要么存到自己服务器,要么利用其它资源,比如七牛,还可以帮我们自由转换amr格式到mp3等格式呢!
    微信服务器默认资源格式为amr,这个格式在android机器可以使用audio标签播放,在ios机器使用audio标签无法播放。

    微信录音功能授权引发的交互问题

    使用微信jssdk接口录音,在同一个域只需要授权一次,即第一次使用录音的时候,微信自己会弹出对话框询问是否允许录音,用户点击允许后,之后再使用录音时,便不会再咨询用户是否允许。
    在第一次按住录音后,由于用户未曾允许录音,微信会提示用户授权允许在本页面使用微信录音功能,这时用户会放开录音按钮转而去点击允许,在用户允许后,才真正会开始录音,而此时用户早已放开录音按钮,那么录音按钮上便不会再有touchend事件,录音便会一直进行。
    解决策略:使用localStorage记录用户是否曾授权,并以此来判断是否需要在刚进入页面是自动录一段录音来触发用户授权

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

    3.难题

    音量bug:在ios设备上,使用微信录音功能后,再播放audio标签的音频,音量极低。
    但是使用微信接口(wx.playVoice)播放录音的音量是正常的,而且之后,audio标签的音量会有所增大(但是依然音量很低)。

    该问题正在沟通微信相关技术人员。
    暂时的解决策略为:对于刚刚录音的音频,使用wx.playVoice来播放,否则使用audio播放服务器资源。原因是不确定该音频本地是否存在,刚刚录音的音频肯定是存在的。


    展开全文
  • 微信小程序录音与播放录音功能实现,话不多说直接上代码实例: test.wxml <button bindtap='start'>开始录音</button> <button bindtap='play'>播放录音</button> <button bindtap=...

    微信小程序录音与播放录音功能实现,话不多说直接上代码实例:

    test.wxml

    <button bindtap='start'>开始录音</button>  
    <button bindtap='play'>播放录音</button>  
    <button bindtap='stop'>停止录音</button>
    

    test.js

    var voice = "";
    Page({
      play: function () {
        //播放声音文件  
        wx.playVoice({
          filePath: voice
        })
      },
      start: function () {
        //开始录音  
        wx.startRecord({
          success: function (e) {
            voice = e.tempFilePath
          }
        })
      },
      stop: function () {
        //结束录音  
        wx.stopRecord();
      }
    })
    

    微信小程序录音与播放录音功能前端界面:

    微信小程序录音与播放录音功能实现
    微信小程序录音与播放录音功能实现

    pick一下最终效果,然后一步一步来。先把界面效果做出来。

    微信小程序录音与播放录音功能:

    1. 长按会随动画出现边上半透明的圈,松开会缩回去。
    2. 顶部progressBar长按时出现,然后随录音时长变短。

    这是界面功能,我们先搞一下。

    wxml

    <view class="head">
      <progress strokeWidth="4" percent="{{value}}" wx:if="{{showPg}}" ></progress>
      <view class="dot {{isTouchStart==true?'dot-blowup':''}} {{isTouchEnd==true?'dot-zoomout':''}}" style="display:{{isDot}}"></view>
      <view class="record" bindtouchstart="recordStart" bindtouchend="recordTerm">
        <image mode="widthFix" src="../../images/record.png"></image>
      </view>
    </view>

    wxss样式

    .head {
      width: 100%;
      height: 400rpx;
      position: relative;
      
    }
    .head ,page{
      background-color: #f7f7f7;
    }
    .record, .dot {
      height: 200rpx;
      width: 200rpx;
      border-radius: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-iteration-count: 1;
    }
    
    .record {
      background: rgba(92, 212, 76);
      z-index: 10;
    }
    
    .dot {
      background: rgba(92, 212, 76, 0.7);
      z-index: 9;
    }
    
    .dot-blowup {
      animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      animation-fill-mode: forwards;
    }
    
    .dot-zoomout {
      animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      animation-fill-mode: forwards;
    }
    
    @keyframes sploosh2 {
      0% {
        box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
        background: rgba(92, 212, 76, 0.7);
      }
    
      100% {
        box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
        background: rgba(92, 212, 76, 0.3);
      }
    }
    
    @keyframes sploosh3 {
      0% {
         box-shadow: 0 0 0 15px rgba(92, 212, 76, 0.3);
        background: rgba(92, 212, 76, 0.3);
      }
    
      100%{
        box-shadow: 0 0 0 0px rgba(92, 212, 76, 0.7);
        background: rgba(92, 212, 76, 0.7);
      }
    }
    
    .record image {
      height: 90rpx;
      width: 90rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      background: transparent;
      transform: translate(-50%, -50%);
    }

    js赋值

    
    var app = getApp(),
      rm = wx.getRecorderManager();
      //录音停止时调用
    rm.onStop(function(e) {
        var a = this;
        wx.showLoading({
          title: "正在识别..."
        });
      
        //上传逻辑
        var n = {
          url: app.globalData.url + "upload",
          filePath: e.tempFilePath,
          name: "music",
          header: {
            "Content-Type": "application/json"
          },
          success: function (res) {
            
           }
          };
          wx.uploadFile(n);
      }),
      Page({
    
        /**
         * 页面的初始数据
         */
        data: {
          hasRecord: false,
          isDot: "block",
          isTouchStart: false,
          isTouchEnd: false,
          value: '100',
          touchStart:0,
          touchEnd:0,
          vd:''
        },
    
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function(options) {
          var a = this;
          wx.authorize({
            scope: "scope.record",
            success: function() {
              console.log("录音授权成功");
            },
            fail: function() {
              console.log("录音授权失败");
            }
          }), a.onShow()
    
        },
        // 点击录音按钮
        onRecordClick: function () {
          wx.getSetting({
            success: function (t) {
              console.log(t.authSetting), t.authSetting["scope.record"] ? console.log("已授权录音") : (console.log("未授权录音"),
                wx.openSetting({
                  success: function (t) {
                    console.log(t.authSetting);
                  }
                }));
            }
          });
        },
        /**
         * 长按录音开始
         */
        recordStart: function(e) {
          var n = this;
          rm.start({
            format: "mp3",
            sampleRate: 32e3,
            encodeBitRate: 192e3
          }), n.setData({
            touchStart: e.timeStamp,
            isTouchStart: true,
            isTouchEnd: false,
            showPg: true,
          })
          var a = 15, o = 10;
          this.timer = setInterval(function () {
            n.setData({
              value: n.data.value - 100 / 1500
            }), (o += 10) >= 1e3 && o % 1e3 == 0 && (a-- , console.log(a), a <= 0 && (rm.stop(),
              clearInterval(n.timer), n.animation2.scale(1, 1).step(), n.setData({
                animationData: n.animation2.export(),
              showPg: false,
              })));
          }, 10);
        },
        /**
         * 长按录音结束
         */
        recordTerm: function(e) {
          rm.stop(), this.setData({
            isTouchEnd: true,
            isTouchStart: false,
            touchEnd: e.timeStamp,
            showPg: false,
            value: 100
          }), clearInterval(this.timer);
        }
      })

    这里我的录音按钮点击扩散效果用的是纯css实现,而上方progress是使用animation实现的。

    参考自必学智库

    在开发微信小程序遇到资源类无法显示的问题:找了很多资料,特记录备用。

    1. 真机测试不能显示图片问题

    原因:微信小程序的图片资源必须是base64和网络图片格式。
    解决方案:js中,对本地图片进行转码,或者直接将url换为image根目录。

    参考资料:http//:wangzhan.jiaxiangz.com

     

     

    展开全文
  • 微信小程序录音权限

    2020-04-21 14:51:53
    #微信小程序录音权限设置 wx.showModal({ //====> 授权 title: '提示', content: '您未授权录音,功能将无法使用', showCancel: true, confirmText: "授权", confirmColor: "#52a2d8", ...

    #微信小程序录音权限设置

     wx.showModal({  //====> 授权
              title: '提示',
              content: '您未授权录音,功能将无法使用',
              showCancel: true,
              confirmText: "授权",
              confirmColor: "#52a2d8",
              success: function (res) {
                if (res.confirm) {
                  //确认则打开设置页面(重点)
                  wx.openSetting({  
                    success: (res) => {
                      console.log(res.authSetting);
                      if (!res.authSetting['scope.record']) {
                        //未设置录音授权
                        console.log("未设置录音授权");
                        self.setData({
                          show: 0
                        })
                        wx.showModal({
                          title: '提示',
                          content: '您未授权录音,功能将无法使用',
                          showCancel: false,
                          success: function (res) {
    
                          },
                        })
                      } else {
                        //第二次才成功授权
                        console.log("设置录音授权成功");
                        // 配置一些东西打开,关闭
                        self.setData({
                          status: 2,
                          show: true,
                          hideText: false
                        })
                        // recorderManager.start(options);
                      }
                    },
                    fail: function () {
                      console.log("授权设置录音失败");
                      self.setData({
                        show: false
                      })
                    }
                  })
                } else if (res.cancel) {
                  console.log("cancel");
                }
              },
              fail: function () {
                console.log("openfail");
                self.setData({
                  show: 0
                })
              }
            })
    
    展开全文
  • 最近一直在做微信JSSDK与录音相关的功能开发, 遇到了各种奇尺大坑, 时不时冷不丁地被坑一道, 让我时常想嘶吼: "微信JSSDK就是个大腊鸡!!!!!!!!!!" 现在工作得到阶段性成果, 有时间休息总结下, 故来整理一下这段时间...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 源码简介: 点击按钮实现相应效果 ↓↓↓↓↓↓↓↓ //test.wxml <button bindtap='start'>开始录音</button> <...
  • 趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. ...
  • <view class='voiceTap' wx:if="{{status == 0}}...点击录音</view>  <view class='voiceTap' wx:if="{{status != 0}}">  <image src='/images/6006.png'></image>  <view clas...
  • 欢迎加入微信小程序开发交流qq群(173683895)相互交流学习。谢谢源码简介: 点击按钮实现相应效果 ↓↓↓↓↓↓↓↓//test.wxml<button bindtap='start'>开始录音</button> <button bindtap='play'...
  • 微信jssdk录音功能开发记录 推荐看原文 标签(空格分隔): 前端 0.需求描述 在微信浏览器内打开的页面,制作一个按钮,用户按住按钮后开始录音,松手后停止录音并将录音上传并长期保存。 1.开发流程 如果...
  • 用户长按录音,松手后直接结束录音,结束录音后,用户可以选择重新录音、播放刚才的录音,上传录音(这里的上传录音指上传到自己服务器,上传步骤是,前端调用wx.uploadVoice,后台再到微信服务器下载音频文件,上传...
  • 用户访问活动首页, 点击 【我想说】 然后调用微信的 JSDK 来录音,录完音之后上传到微信的服务器,然后 前端根据声音生成一张圣诞树形状的声波图,用户点击分享生成一张海报,其他用户扫描二维码可以收...
  • 今天来实践一下微信的语音对讲的录音实现,这个也比较容易实现。在此,我将该按钮封装成为一个控件,并通过策略模式的方式实现录音和界面的解耦合,以方便我们在实际情况中对录音方法的不同需求(例如想要实现wav...
  • 微信小程序之录音

    2018-06-10 17:43:13
    &lt;!--pages/index/release/release.wxml--&gt; &lt;scroll-view&gt; &lt;view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;...
  • Vue微信SDK 录音功能

    2018-07-19 12:30:10
    微信下,因为项目中会加载一个外部js,有一定几率会阻塞wx的初始化,所以如果在用户点击按钮时,wx sdk没有初始化,也显示假的录音按钮。 将tourch和mouse写绑定在一个button中 在IOS下 会出现一次录音 取消长按...
  • 话不多说直接上代码: ...开始录音</button> <button bindtap='play'>播放录音</button> <button bindtap='stop'>停止录音</button> test.js var voice = ""; Pa...
  • 1、在进行微信网页录音功能开发的时候,微信jssdk初始化一定要把用到的方法写在wx.config配置信息jsApiList中,不然调用方法起不到效果。 jsApiList: ['onMenuShareAppMessage','translateVoice','onVoiceRecordEnd...
1 2 3 4 5 ... 20
收藏数 2,449
精华内容 979
关键字:

微信开发 点击录音