作者归档:Keystion

咖啡馆的下午时光

<amp-iframe frameborder="0" layout="responsive" sandbox="allow-scripts allow-same-origin" width=298 height=52 src="https://music.163.com/outchain/player?type=2&id=406346390&auto=1&height=32"></amp-iframe>

写了一些东西,安静了许多,还是需要阶段性的去一个人独处下,瞻前顾后,给自己一些动力。

photo

  • 一杯咖啡
  • 一个下午
  • 一件事情
  • 一张照片
  • 一首歌循环一下午
  • 一篇博文
  • 给自己一点动力

还是喜欢那句话:

文艺不足,二逼有余,三十郎当 – 熊小明(51as.com站长 )

jQuery.AudioPlayer.js

jQuery.AudioPlayer.js

A audio player of jQuery plugin.

Keystion.github.io/jQuery.AudioPlayer.js/

Demo:Keystion.github.io/jQuery.AudioPlayer.js/test/index.html


How to use

Path Description
jQuery.AudioPlayer.js the script file
jQuery.AudioPlayer.css the stylesheet file

Example:

<!-- jQuery file -->
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>

<!-- jQuery.AudioPlayer.js -->
<link href="../src/theme.default.css" rel="stylesheet">
<script src="../src/jQuery.AudioPlayer.js" type="text/javascript" ></script>

<script type="text/javascript">
    $(function() {
        var player = $.AudioPlayer;
        player.init({
            container: '#audioWrap'
            ,source: 'http://mr3.doubanio.com/70d0968fb8312ade3f04c7e1d1d18d1f/1/fm/song/p1817677_128k.mp4'
            ,imagePath: './image'
            ,debuggers: false
            ,allowSeek: true
        });
    });
</script>

Arguments:

argument value Description
container String The outer Dom ClassName/id, default ‘body’/外部Dom ClassName / id,默认的“body”
source String audio source / 音频源
imagePath String image resources / 图像资源
debuggers Boolean open console log, default close ‘false’ / 打开控制台日志,默认关闭:false
allowSeek Boolean Whether to support drag and drop, the default open: true / 是否支持拖拽,默认开启:true
canplayCallback function After can play TODO / 可以播放之后,做某些事情
onloadstartCallback function After searching for the audio TODO / 开始查找音频之后,做某些事情
onwaitingCallback function When the video because that need to be a frame buffer and stop / 当视频由于需要缓冲下一帧而停止
playCallback function After playback TODO / 播放之后,做某些事情
pauseCallback function After the suspension TODO / 暂停之后,做某些事情
seekedCallback function After the drag, the callback function (allowSeek: false) / 拖动之后,回调函数(allowSeek: false
endedCallback function End of the play TODO / 播放结束之后,做某些事情
mutedCallback function After the mute TODO / 静音之后,做某些事情

The ‘function’ result data.status == true mean success.

function

  • AudioPlayer.init(); initialization / 初始化
  • AudioPlayer.updateSource(); Update the playback of audio file / 更新播放音频文件
  • AudioPlayer.toggleplay(); Switch to suspend began / 切换暂停开始
  • AudioPlayer.play(); Start playing / 开始播放
  • AudioPlayer.pause(); pause / 暂停播放
  • AudioPlayer.muted(); mute / 静音

AudioPlayer.init(); // initialization

Example:

AudioPlayer.init({
    container: '#audioWrap'
    ,source: './Fade.mp3'
    ,debuggers: false
    ,allowSeek: false
    ,canplayCallback: function(){
        // your code
    }
    ,playCallback: function(){
        // your code
    }
    ,pauseCallback: function(){
        // your code
    }
    ,seekedCallback: function(){
        // your code
    }
    ,endedCallback: function(){
        // your code
    }
    ,mutedCallback: function(data){
        // your code
    }
});

AudioPlayer.updateSource();

Update the playback of audio file / 更新播放音频文件

argument / 参数:

  • source: audio file path / 音频文件路径

Example:

jQuery.AudioPlayer.updateSource({
    source: './example.mp3'
});

AudioPlayer.toggleplay(); // Switch to suspend began / 切换暂停开始

AudioPlayer.play(); // Start playing / 开始播放

argument / 参数:

  • function(data){}
    • data.status:true 播放成功

Example:

AudioPlayer.play(function(data){
    if(data.status){
        alert('Say Hello');
    }
});

AudioPlayer.pause(); 暂停播放

argument / 参数:

  • function(data){}
    • data.status:true 暂停成功

Example:

AudioPlayer.play(function(data){
    if(data.status){
        alert('Say Bye');
    }
});

AudioPlayer.muted(); 切换静音

argument / 参数:

  • function(data){}
    • data.status:true 静音成功

Example:

AudioPlayer.play(function(data){
    if(data.status){
        alert('已静音');
    }
});

Change log

2017.01.06

  • Add comments in English
  • Fix the window change audio download progress bar UI has not changed

2017.06.26

  • Add onloadstartCallback function
  • Add onwaitingCallback function

issues

Create a new issues

如何清除Google Chrome控制台的历史记录(consoleHistory commandLine)

问题出现

如何清除掉这些繁琐的历史记录呢:

  • clear();
  • console.clear();
  • Ctrl/control+L

然而执行完并没有什么用,历史记录还是会存在。

找到问题解决方法

然后就去stackoverflow上面找到一个解决方案特简单:

从Chrome 50起,您可以从控制台上下文菜单中使用“Clear console history(清除控制台历史记录)”。

测试是否OK

why

咦,上图怎么会有两个控制台呢:

1 打开控制台(command + option + i),控制台右上角的三个点(Customize and control DevTools\定制和控制DevTools)

2 光标定位到弹出来的控制台,然后按快捷键 command + option + i 定制和控制DevTools的DevTools。

3 恩,就酱紫,两个都出现了。

4 然后你找到 Application tab -> Storage -> Local Storage -> chrome-devtools://devtools -> consoleHistory 这个数组里面就是所有commandLine历史记录

搞定,玩的愉快🤣,Happy New Year!

web录制音频文件大小问题

首先普及相关知识

一个小公式:

采样频率(Hz) * 采样位数(bit) * 声道数 / 8 = 数据量(字节/秒)

<!– more –>

采样测试

没有整过Audio相关的业务,就一个测试,通过navigator.getUserMediaAudioContext启动web录音取样得到的数据,只能做参考。

音频类型 时间 采样位数 采样频率 声道数 大小(字节) 音色
audio/ogg 60s 8 8000 1 535800 变粗
audio/ogg 60s 8 8000 2 537439 变细变快 时间减半
audio/ogg 60s 16 8000 1 1071556 变粗
audio/ogg 60s 16 8000 2 1071556 变细变快 时间减半
audio/ogg 60s 8 11025 1 669740 ok
audio/ogg 60s 8 11025 2 669740 变细变快 时间减半
audio/ogg 60s 16 11025 1 1339436 ok
audio/ogg 60s 16 11025 2 1341484 变细变快 时间减半
audio/ogg 60s 8 44100 1 2662444 ok
audio/ogg 60s 8 44100 2 2674732 变细变快 时间减半
audio/ogg 60s 16 44100 1 5349420 ok
audio/ogg 60s 16 44100 2 5316652 变细变快 时间减半
音频类型 时间 采样位数 采样频率 声道数 大小(字节) 音色
audio/wav 60s 8 8000 1 534981 变粗
audio/wav 60s 8 8000 2 534981 变细变快 时间减半
audio/wav 60s 16 8000 1 1071556 变粗
audio/wav 60s 16 8000 2 1074834 变细变快 时间减半
audio/wav 60s 8 11025 1 669740 ok
audio/wav 60s 8 11025 2 670764 变细变快 时间减半
audio/wav 60s 16 11025 1 1335340 ok
audio/wav 60s 16 11025 2 1341484 变细变快 时间减半
audio/wav 60s 8 44100 1 2674732 ok
audio/wav 60s 8 44100 2 2682924 变细变快 时间减半
audio/wav 60s 16 44100 1 5349420 ok
audio/wav 60s 16 44100 2 5357612 变细变快 时间减半
音频类型 时间 采样位数 采样频率 声道数 大小(字节) 音色
audio/mp3 60s 8 44100 1 2666540 ok
audio/mp3 60s 16 44100 1 5349420 ok
audio/mp3 60s 8 11025 1 668716 ok

得出结论

测试得到想要的结果:

  • audio/ogg:11025(Hz)* 8(bit)* 1 * 60s ≈ 669740
  • audio/wav:11025(Hz)* 8(bit)* 1 * 60s ≈ 669740
  • audio/mp3:11025(Hz)* 8(bit)* 1 * 60s ≈ 668716

1分钟 0.67M左右

文件大小和采样位数、采样频率及声道数有关系直接关系,和文件类型关系不大。

相关文档

Merry Christmas

Merry Christmas!

<p data-height="316" data-theme-id="light" data-slug-hash="oYVyLd" data-default-tab="result" data-user="Keystion" data-embed-version="2" data-pen-title="Google search result page christmas themes" class="codepen">See the Pen <a href="http://codepen.io/Keystion/pen/oYVyLd/">Google search result page christmas themes</a> by Keystion (<a href="http://codepen.io/Keystion">@Keystion</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

意外的发现了Google为搜索Christmas设定的主题,特此Mark一下!
<a href="https://www.google.com/?gfe_rd=cr&ei=dx1aWLfxIKTz8AfF146oAg&gws_rd=cr&fg=1#newwindow=1&safe=active&q=christmas">尝试搜索一下:christmas</a>

在Nginx上修改MySQL root用户密码

phpmyadmin

vi /etc/my.cnf

/etc/my.cnf文件的[mysqld]下面(换行)添加skip-grant-tables,保存并退出(ESC->:->wq->回车)。

<!– more –>

之前

# The MySQL server
[mysqld]
port            = 3306
socket          = /tmp/mysql.sock

之后

# The MySQL server
[mysqld]
skip-grant-tables
port            = 3306
socket          = /tmp/mysql.sock

重启MySQL:

/etc/init.d/mysql restart

成功提示:

Stopping MySQL: [ OK ] Starting MySQL: [ OK ]

接下来继续输入:mysql;输入

mysql> USE mysql ;
mysql> UPDATE user SET Password = password ( 'OHYnECf17EPdG6wb' ) WHERE User = 'root' ;
mysql> FLUSH PRIVILEGES; 
mysql> quit ->回车

完成

重启MySQL

/etc/init.d/mysqld restart

输入mysql -u root -p就会提示输入新密码,输入刚才设置的秘密就可以进去,说明设置成功。

此时你以为结束,并没有,记得把skip-grant-tables/etc/my.cnf里面删除掉,不然即使你通过刚刚的过程修改了root用户的密码最后还是无法对数据库进行

phpmyadmin

正文结束了,其实下面还有一些文字👇


一个漂亮的无纺布手提袋,不单单只是一个商品的包装袋。

还能够印上贵公司的标志或者广告语,消费者在购物的同时既得到了一个精美的手提袋,而商家也得到了无形的广告宣传两全其美。

适合任何公司、任何行业作为广告宣传、赠品以及外包装之用。

海创以专业的设计和制作工艺,为您做出优质的手提袋,欢迎订购!

联系一下子呗:15003209070

无纺布手提袋


macOS 管理多个SSH公钥密钥

ssh-key

最终结果文件

.
├── authorized_keys
├── config
├── id_rsa.coding
├── id_rsa.coding.company
├── id_rsa.coding.company.pub
├── id_rsa.coding.pub
├── id_rsa.github
├── id_rsa.github.pub
└── known_hosts

新建不同的密钥和Host去匹配(@wazi)。

1、输入邮箱

ssh-keygen -t rsa -b 4096 -C "ytshang@gaoxiaobang.com"

2、保存位置,一般就在默认的目录下即可

Enter file in which to save the key (/Users/key/.ssh/id_rsa):
/Users/key/.ssh/id_rsa.coding.company

3、输入密码两次确认输入,当然密码是不可见的,直接输入完,回车确认即可:

Enter passphrase (empty for no passphrase):[输入密码]
Enter same passphrase again:[再次输入密码]

4、复制公钥:

pbcopy < ~/.ssh/id_rsa.coding.company.pub

把你需要单独的网站SSH公钥密钥,都用以上步骤都生成下。

这是我最终生成的文件(Coding公司、Coding个人、Github个人):

ssh-key

添加到authorized_keys文件里面:

ssh-rsa AAAAB3NzaC1yc2EAAAADAQCAQCw******RQw== keystion@A.com
ssh-rsa AAAAB3NzaC1yc2EAAAADAQAB*******inUtQ== keystion@B.com
ssh-rsa AAAAB3Nz********ZCcvI1xZhBRWpZZdhv4Q== keystion@C.com

config文件

Host github.com
    HostName github.com
    IdentityFile ~/.ssh/id_rsa.github
    User git
Host git.coding.net
    HostName git.coding.net
    IdentityFile ~/.ssh/id_rsa.coding
    User git

Host company.git.coding.net
    HostName git.coding.net
    IdentityFile ~/.ssh/id_rsa.coding.company
    User git

测试是否连接成功

ssh -T git@github.com
Hi Keystion! You've successfully authenticated, but GitHub does not provide shell access.

ssh -T git@git.coding.net
Enter passphrase for key '/Users/key/.ssh/id_rsa.coding':
Hello keystion! You've connected to Coding.net via SSH successfully!

ssh -T git@company.git.coding.net
Hello key_kaikeba! You've connected to Coding.net via SSH successfully!

clone仓库时候多少有一点变化,pullpush等无变化。

git clone git@[Hose]:[UserName]/****.git

ssh-key

嗯,正文到这里结束。


一个漂亮的无纺布手提袋,不单单只是一个商品的包装袋。

还能够印上贵公司的标志或者广告语,消费者在购物的同时既得到了一个精美的手提袋,而商家也得到了无形的广告宣传两全其美。

适合任何公司、任何行业作为广告宣传、赠品以及外包装之用。

海创以专业的设计和制作工艺,为您做出优质的手提袋,欢迎订购!

联系一下子呗:15003209070

无纺布手提袋


【转】折腾了一下Terminal(终端)之iTerm2

iTerm2.png

很早之前@GhostBoyZone发给我一个关于iTerm 2的主题配置,收藏了,后来也分享给小伙伴们了,特此来Mark到自己的博客里面,顺便修复了字体的问题。

或许别人会觉得这个主题过于花哨,萝卜白菜各有所爱。还有很多大神直接用vim(应该算个神器吧?)。

iterm2-zsh-agnoster-git.png

所以正文从这里开始咯…


终端应用:iTerm2

下载安装,这个你懂的。

Command + , 打开偏好设定窗口:

  1. Profiles / Window,把 Settings for New Windows 中的 Style 改成 Left of Screen 让它在屏幕左侧显示(在宽屏显示器上效果不错)
  2. Keys,勾选 Hotkey 中的 Show/hide iTerm2 with a system-wide hotkey,然后设定一个热键。我个人偏爱 Command + .
    现在按 Command + . 就可以随时调出或者隐藏 iTerm2 了。

<!– more –>

配色方案:Solarized Dark

下载,解压,打开 iTerm2 的偏好设定,Profiles / Colors,最下面的 Load Presets … / Import… 加载 iterm2-colors-solarized/Solarized Dark.itermcolors 配色方案。

Z-Shell

系统自带了 4.0 版的 zsh,但我们可以用 brew install 安装最新的 5.X。

brew install zsh
sudo rm /bin/zsh    # 替换系统自带 zsh
sudo ln -s `brew --prefix zsh`/bin/zsh /bin/zsh
chsh -s /bin/zsh  # 切换系统当前用户的默认 shell 为 zsh

安装完毕,Command + W 关闭 iTerm2 当前窗口,然后按 Command + . 重新打开,此时 shell 已经换成 zsh 了。

oh-my-zsh

这是一套十分强大的 zsh 配置方案。

curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh

<del>下载这个字体补丁并安装,给系统中的 Menlo 字体进行增补。</del>

安装字体Monaco for Powerline。(@GhostBoyZone)

链接: https://pan.baidu.com/s/1bp7SfeR 密码: tbbk

打开 iTerm2 的偏好设定,Profiles / Text,把 Regular Font 和 Non-ASCII Font 都换成 Menlo,大小为 14pt Regular。

编辑 ~/.zshrc 文件:

ZSH_THEME="agnoster"          # 使用 agnoster 主题,很好很强大

DEFAULT_USER="你的用户名"     # 增加这一项,可以隐藏掉路径前面那串用户名

plugins=(git brew node npm)   # 自己按需把要用的 plugin 写上

其中插件可以看这里https://github.com/robbyrussell/oh-my-zsh/wiki/Plugins

另外,建议把末尾的 export PATH 稍微调整一下,比如 Homebrew 就建议 /usr/local/bin 应该优先于 /usr/bin;另外也可以自己加上比如 Ruby Gems 目录 /usr/local/opt/ruby/binNode.js NPM 目录 ~/bin 等。

export PATH=/usr/local/bin:/usr/local/sbin/:$HOME/bin:$PATH

关于 Homebrew 的路径,比如 zsh 这个包可以通过 brew --prefix zsh 知道它的目录是 /usr/local/opt/zsh,关于这些链接:

  • /usr/local/opt/zsh 目录 -> /usr/local/Cellar/zsh/版本号 目录
  • /usr/local/bin/zsh 文件 -> /usr/local/Cellar/zsh/版本号/bin/zsh 文件

所以就有了上面那条 chsh -s 命令的写法。

重新打开 iTerm2 窗口,配置完成。玩的愉快 😜


参考资料

转自:http://xingrz.me/2013/2013-06-19/terminal-zhuangbility.html

wc: command not found

wc: command not found

环境:macOS Sierra 10.12.1 (16B2555)

今天^2016.11.17在用户目录下面,编辑.bash_profile的时候把PATH的值写错了,结果就出现了小白心惶惶的现象;

wc: command not found 01.jpg

wc: command not found 02.jpg

出现这样的现象,sudocdvi等之类的命令都不能用,迷之尴尬啊,心慌了,怎么才能把.bash_profile里的PATH值修改了呢,就想到了Sublime Text编辑器可以显示隐藏文件,遂把整个用户目录丢到了编辑器里面,找到相应的值,加以修正,这才安心下来。😂

解决方法:

把用户目录丢到sublime text3里面修改了正确的PATH值。

点滴记录,fix it。

CSS中的z-index的最大值

z-index
图片来自:www.annyhe.com/zindex/#3

z-index属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候,z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。 —MDN z-index

<!– more –>

z-index sample

业务代码中看见了这样一段code,然后想都没有想,直接把另一个元素的z-index值设置为:999999999999999 + 1,就能把它覆盖掉吧,结果并没有那么理想。◻︎_-||

然后就去查找z-index在各个浏览器中的最大值是多少呢,Google了一番找到了下面这个表格,

Browser Max z─index value When exceeded, value changes to:
浏览器 最大值 超过时,值的变化:
Firefox 0-2 2147483647(length:10) element disappears/元素消失
Firefox 3 2147483647(length:10) 0
Firefox 4+ 2147483647(length:10) 2147483647(length:10)
Safari 0-3 16777271(length:8) 16777271(length:8)
Safari 4+ 2147483647(length:10) 2147483647(length:10)
Internet Explorer 6+ 2147483647(length:10) 2147483647(length:10)
Chrome 29+ 2147483647(length:10) 2147483647(length:10)
Opera 9+ 2147483647(length:10) 2147483647(length:10)

举个栗子:

example

https://codepen.io/Keystion/embed/mOEBzO

特此而来Mark一下,没有辣么多浏览器,也就测试了下:

  • chrome(版本 54.0.2840.87 (64-bit)
  • Safari(版本 10.0.1 (12602.2.14.0.7)
  • Firefox(49.0.2

参考文献: