武汉高校之恋-语音介绍页面实现总结

web
目录
  1. 任务实现
  2. 其他
    1. 毛玻璃效果
    2. 关于播放的按钮
    3. 关于微信页面的调试
  3. 更新1
    1. 关于手按住手机屏幕计时停止
  4. 更新2
    1. 关于毛玻璃的最终解决方案
  5. 更新3
    1. 关于audio的播放和停止切换的方法
  6. 更新4
    1. 关于录音中退出页面后再调用录音接口失败
  7. 更新5
    1. 关于在非wechat中的提示问题

任务实现

  • 设计图
    设计图

  • 根据设计图，步骤如下：
    1.实现微信js-sdk的录音，播放，暂停的接口！具体做法是在个人页面中设定三个按钮，分别对应！
    2.弹窗：背景图片先写好样式，然后点击弹窗，由于毛玻璃效果不佳（后面细说），背景暂时没调！然后分别作出开始录制、结束录制和重播以及发布页面（新设计图）！
    3.实现初步交互过程：也就是说点击开始录制出现第二界面……(界面中的切换)。当时为了练手visio，还画了一个很low的图。
    初步交互逻辑图
    4.圆形进度条：计时的问题，这个可以js实现！并不难，关于实时进度条的问题！
    关于圆形进度条，可以参考以下：

    • 参考一
    • 参考二
      但是，我现在实现的实时是每秒会转6度，看起来不连续，现在有个新思路，就是和js独立开，点击开始录音的话，js计时，此时动画开始（先右边转180度，然后左边再转180度，动画排队问题）。当点击结束录音的时候，动画停止!

    5.功能交互部分：
    功能交互图
    基本实现的差不多了！

    6.播放自己录音或者听别人录音的交互部分。
    由后台传回的ogg格式的音频文件，在页面中使用html5的audio！
    但是注意：

    苹果手机不支持ogg格式的文件！所以改成后台传回mp3格式！问题ok

    7.bug检测，以及修复

其他

毛玻璃效果

这是一个很炫酷的效果，但是对于图片好实现，但是对于要作为整个div块的话，实现有难度！
实现方法可以从几个方向：
1.filter的方法,微信浏览器支持性问题。
2.svg的方法。无效
3.canvas：但是效果针对resterized image，所以在此需求不符。
4.用背景图片的方法，没有达到效果。
5.要关注的是backdrop filter
6.高端玩法：先将当前页面截屏，然后在用canvas虚化！
参考文献：
张鑫旭的文章
backdrop-filter

关于播放的按钮

暂停的三角不是应该中线对其，而是应该三个角对应圆周的距离相等。@skyway

关于微信页面的调试

暂时先写这些吧，再更新！

更新1

关于手按住手机屏幕计时停止

  • mask出现，让屏幕overflow:hidden。但是。。。问题没这么简单！
  • 必须是html和body同时设定才可以，不然只有pc端达到效果，但是微信端是没有效果的！
但是，事情往往没有这么简单，安卓手机上基本是已经没有问题了，但是坑爹的ios是这样的，它还可以上下滑，虽然没有了scroll。

解决方法就是：

1
2
$('body').on('touchmove', function (event) {event.preventDefault();}); //mask出现时。
$('body').unbind();//取消mask时。

更新2

关于毛玻璃的最终解决方案

  • 安卓上是那种很low的纯色，估计是设计打架没有打过那个PM吧！
  • ios上由于支持filter:blur(15px)所以事先的是毛玻璃的效果。
    qqX5内核常见问题
    虽然微信的服务器比这坑的多，不过也是可以参考一二的！
    代码如下：
1
2
3
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

更新3

关于audio的播放和停止切换的方法

就是通过audio.src来切换。

1
2
3
4
5
6
7
8
9
10
11
12
13
if(audio_url){
    if(audio.paused){
        audio.src= audio_url;
        audio.play();
        $(".record_play_icon .play").html("垙");
    }else{
        audio.pause();
        $(".record_play_icon .play").html("垘");
        audio.src= " ";
    };
}else{
    alert("请先录音！");
};

更新4

关于录音中退出页面后再调用录音接口失败

错误原因是recording
解决方案：在每次调用开始录音的接口是先执行一次wx_stopRecord()

1
2
3
4
wx.stopRecord();
if(wx_record){
    wx.startRecord({
    ......

更新5

关于在非wechat中的提示问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 判断能否使用微信接口
var wx_support = false;
var wx_record = false;

wx.ready(function(){
   wx.checkJsApi({
        jsApiList: ['chooseImage','startRecord',], // 需要检测的JS接口列表
        success: function(res) {
//console.log('ok');
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        if(res['checkResult']['chooseImage']){
            //alert('ok');
            wx_support = true;
        }else{
            wx_support = false;
        };
        if(res['checkResult']['startRecord']){
            wx_record = true;
        }else{
            wx_record = false;
        };
        // 蛋疼呀？但是不稳定，还是分开写吧！
        // if(res['checkResult']['chooseImage'] && res['checkResult']['startRecord']){
        //     alert("I am True");
        // };
    }
});
});