网易云音乐 Linux 版高分屏问题解决方案

网易云音乐 Linux 版推出很久了,肯定已经有很多人反馈过 HiDPI 下不能正常工作的问题了,然而似乎网易生娃不养娃,版本号 1.0.0 从一开始就没有变过(

在网上搜索 HiDPI 下字太小难以阅读就能找到最简单的解决方案:添加参数 `–force-device-scale-factor=2` 就能让他强制两倍渲染。不过这个方法在我这儿(ArchLinux,KDE)上并不是什么好的解决方案:启动程序时,程序按照环境 DPI 创建了窗体,但是内容部分则依然使用原分辨率渲染,效果就是只有坐上 1/4 能正常显示内容,剩下的都是白色的空白。只要我的全局 DPI 不是 100%,这些空白就一直存在。

继续阅读网易云音乐 Linux 版高分屏问题解决方案

单页应用下实现动态的脚本加载

之前在写自己的博客框架的时候遇到了一个问题:文章中的 `script` 标签没有任何作用,以 Vue 为 MVVM 框架举个例子:


  

继续阅读单页应用下实现动态的脚本加载

[HTML] AudioContext 折腾笔记 02

之前我们已经看到了如何利用 HTML 的 WebAudio API 播放一段自定义的音频,其实难度并不大,主要步骤就是创建音频上下文,创建缓冲区和音频源,之后在缓存区内暴力写入波形数据,就可以播放了。

有了这些功能,理论上我们是可以在浏览器里使用 JavaScript 解码任意的音频文件并播放的,然而实际上 JavaScript 本身算是个半残废语言,而且既然能用 HTMLAudio 标签来播放音频,为什么要自己解码呢(

不过话说回来,不是所有代码都是写了拿去用的,有的时候折腾折腾一些比较奇怪的东西也非常有趣。想到世界上有一个叫 WAV(audio/x-wave) 的音频格式,其结构听说也是非常的简单粗暴,在解码上基本没有什么复杂度。于是为什么不尝试着自己用 JavaScript 把 wav 音频通过音频上下文接口播放出来呢?

继续阅读[HTML] AudioContext 折腾笔记 02

[HTML] AudioContext 折腾笔记 01

前天尝试了一波那个什么 MediaSourceExtension,结果发现那套API目前限制蛮大的,而且对我来说没什么帮助(audio/x-wav 完全不正常支持,audio/mpeg 也只能在 Chrome 上使用)于是只能放弃折腾了 QAQ

昨天突然想起之前写 nanoPlayer 的时候,使用了一个叫 Audio Context 的接口,nanoPlayer 用了这个 API 里的 createAnalyser 方法,来获得音频的频率数据,进而实现了一个频谱可视化功能。之前就注意到了这个接口中有个自定义 AudioBufferSource 的方法,可以指定若干 Float32Array 并交给浏览器播放,应该是蛮有意思的。

这里就实现一个可制定频率的正弦波音频吧,如果这个实现起来没有什么难度的话,就准备试试浏览器端解码 WAV 音频。

继续阅读[HTML] AudioContext 折腾笔记 01

[HTML] MediaSource 折腾笔记 01

MediaSource 是 HTML5 中的一个实验性特性,用于给 `HTMLMediaElement` 对象提供数据源。这里的数据源通常是使用 `XMLHttpRequest` 获得的数据。在 XHR 取得数据后,我们可以使用 JavaScript 对数据进行一些操作,比如提取 ID3、修改封装类型等等。 某 bilibili 开源的 Flv.js 就是使用这个特性实现的在 HTML5 环境下播放 H264 + AAC 格式的 FLV 视频。

最近在写 `Nano Player` 的时候遇到了两个比较尴尬的问题:1、ID3 信息必须手动指定;2、网易云音乐上下载的 MP3 由于某些原因必须缓冲 2MB 才能播放(详见MP3缓冲2MB才开始播放的解决方法)。于是想到是不是可以用这个 MediaSource 来暴改 MP3 呢?我也不知道

不管怎样,要用这个 MSE 来解决问题,首先就是要用它来播放文件(如果获得的数据直接喂给 MSE 都不能播放那还讨论个什么鬼)

继续阅读[HTML] MediaSource 折腾笔记 01

[LeetCode] 按类型的刷题总结(长期更新)

最近几天无聊,又去上 LeetCode 探智商下限了(划掉

数组类 Array:

1. 二分查找:

此类题整体较简单,而且在编码过程中不一定需要使用二分查找,用一些 hash based 的数据结构也是不错的选择。在 C++ 下借助 set, map 或是 binary_search + vector 都可以较为轻松的解决。

继续阅读[LeetCode] 按类型的刷题总结(长期更新)

[WebGL] 更加灵活的描点实现

之前的代码实现了描绘一个巨大的、正方形的、红色的点,但是,稍有常识的人都能看出,那个点的颜色、位置、大小,都是无法在运行时改变的,这就比较尴尬了……

毫无疑问,Web 前端的编程语言是 ECMAScript,然而顶点着色器和片元着色器的控制用的却是 GLSL ES。为了能动态的修改着色器代码,我们就需要在着色器代码里添加需要动态编辑的变量,并且通过已有的方法来通过 JavaScript 获取并修改他们的值。

继续阅读[WebGL] 更加灵活的描点实现

[WebGL] 简单的 WebGL 描点实现

相关库的地址:WebGLBook/lib at master

效果预览见最后。

注意:这只是个人的理解,不保证正确。如有错误欢迎指正!

首先准备具有一个画布(canvas)的页面,所有的 WebGL 程序都会通过这个 canvas 展现出来:

继续阅读[WebGL] 简单的 WebGL 描点实现