Life

车

拿到驾照也有好几年了，一直没有摸过车，最近整了一辆二手别克英朗GT手动版练练手，花了半天时间就摸熟怎么开并很快喜欢上了开车的乐趣，可能这就是男人的天性吧。自己之前没有深入了解过汽车，对各种配置，发动机引擎一点不懂，唯一知道的就是路上跑的车是什么牌子的。这篇文章来学习下汽车前机箱盖里面都是些什么。

Read More

小程序

微信小程序中createInnerAudioContext操作音频笔记

从微信小程序平台自基础库 1.6.0 版本开始，官方就不再推荐使用audio组件标签播放音频文件，替代方案是使用createInnerAudioContext接口来操作，音频文件的播放，暂停等一系列事件都改由异步回调的方式获取。

和标签的方式相比，createInnerAudioContext接口稍微复杂一点，这里以uniAPP为例，初始化音频接口：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onLoad() {
    let vm = this;
    const innerAudioContext = uni.createInnerAudioContext();
    innerAudioContext.autoplay = false;
    innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
    innerAudioContext.onPlay(() => {
        console.log('开始播放');
    });
    innerAudioContext.onError((res) => {
        console.log(res.errMsg);
        console.log(res.errCode);
    });
    
    this.audioContext = innerAudioContext;
}

在页面Page的onLoad生命周期回调函数中初始化，接口中音频文件的实践操作大部分都是on或off开头的回调，比如onPlay，onError。

在获得音频长度duration时，它是createInnerAudioContext对象的属性，需要在onCanplay函数中获取：

1
2
3
innerAudioContext.onCanplay(() => {
    console.log(innerAudioContext.duration);
});

但是这时duration是0，并没有获取到音频文件的真实长度，解决办法如下：

1
2
3
4
5
6
7
8
9
10
innerAudioContext.onCanplay(() => {
    console.log(innerAudioContext.duration);
    let intervalID = setInterval(() => {
        if (innerAudioContext.duration > 0) {
            clearInterval(intervalID);
            vm.audioDuration = innerAudioContext.duration;
            console.log(vm.audioDuration);
        }
    }, 100);
});

在onCanplay中，使用一个Interval定时器来不断获取长度信息，直到得到值。

Reference：

[1] https://zh.uniapp.dcloud.io/component/audio.html#
[2] https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.html

frontend

Insert image caption in Hexo

Hexo provides some useful hook functions to manipulate the posts before or after rendering the posts. For the image caption, the operation can be processed in the after_post_render callback in which the caption is added after each image tag when the post is rendered. Just a few lines of code:

1
2
3
4
5
6
7
8
9
10
hexo.extend.filter.register('after_post_render', function(data) {
    if (hexo.config.image_caption && hexo.config.image_caption.enable == true) {
        // caption class name
        let className = hexo.config.image_caption.class_name || 'image-caption';
        if (data.layout == 'post' || data.layout == 'page' || data.layout == 'about') {
            data.content = data.content.replace(/(<img [^>]*alt="([^"]+)"[^>]*>)/g, '$1' + '<span class="' + className + '">$2</span>');
        }
    }
    return data;
});