Xzavier

行到水穷处,坐看云起时

自己管理node版本 不用nvm,n

不用Nvm 和 N,我们怎么管理Node版本呢? 其实我在我的mac上还是用的nvm,也用过n进行node版本管理,升级呀切换呀什么的。 但是node人家没说一定要个node版本管理器是吧,假如你有洁癖,就是不想用这些东西,那你可以往下看看。 安装Node 首先下载node版本包,我们就放在 /usr/local 下吧 cd /usr/local 然后下载包 wget "ht...

前端捕获麦克风录音 && 语音聊天 Capturing Audio && Voice Chat

Demo && Code 语音聊天 Demo 二维码: Android Chrome支持OK,IOS微信扫码然后用Safari打开测试,需要IOS11以上。 思路 目前主要思路为: 1、navigator.mediaDevices.getUserMedia捕获用户麦克风,获取录音数据; 2、处理音频流最后将数据转换为可播放的数据; ...

捕获用户麦克风 && 摄像头 Capturing Audio && Video

Use It 捕获麦克风 控制台输入下面代码实现麦克风捕获,戴上耳机,就可以听到你说话的声音了: const aconstraints = { audio: true}; navigator.mediaDevices.getUserMedia(aconstraints) .then(function(mediaStream) { const audio = document....

Web Speech 语音 && 麦克风 SpeechSynthesisUtterance SpeechSynthesis SpeechRecognition

Use It 语音朗读 控制台输入下面代码实现语音朗读: let ssu = new SpeechSynthesisUtterance(); ssu.text = 'hello, xzavier.' window.speechSynthesis.speak(ssu); 实际使用中,可通过volume, rate, pitch, voice, lan...

DIY video player 自定义video播放器样式

DIY 本文基于HTML5 Video API,自定义Web视频播放器样式。 其实吧,原生的video 标签样式挺好看的,但每个人的视觉感受不一样,所以就会有需要改变原生样式的时候。 那就给它化个妆咯。淡妆,淡妆。 【code here】 <video class="ppq-video video-hidden" src="https://zhuanjia4v-1252768...

DIY audio player 自定义audio播放器样式

之前也有用到audio,大概是生日贺卡,博客音乐,播放语音等场景。 场景也比较简单,一个按钮加一点动画,再用上Audio的API,基本上就可以搞定了。 哦,可能还会涉及到自动播放。【这里】 DIY 以上场景,我们一般都看不到Audio的样式,基本都被隐藏了。因为对于新时代的我们来说,暂时还没有get它的美。 但是,我们要控制音频的播放,直观的看到时间进度等,那就需要展示这东西了。世上没...

Iframe攻防 见招拆招那些事儿

iframe - 见招拆招 iframe - 防止被嵌套,防止别人阻止自己的页面被嵌套,一攻一防,功守道 第一招 - 打拳 - 使用别人的页面 <iframe src="https://www.google.com"></iframe> 当然,这是最简单的招了,也阔以说是写笔记为了凑招,哈哈,反正iframe一下就可以套用别人的页面了。 你所了解的什么攻击啊...

前端随便玩儿 一些有趣的

做在前端,学在前端,玩在前端,爱在前端。 前端一些好玩的事儿,看我们平时都能弄些什么玩儿。 鼠标点击效果 (function () { var playWords = ['喝热水', '吃了没', '早点睡', '在开会', '多穿点', '是我妹', '有点贵', '我很累', '你别闹', '真没有', '喝多了', '对不起'], colors = ['#f...

git stash 使用 切换工作场景

工作期间,难免要临时跳出去写别的代码: 在git版本管理上,我难道要把现在没写完的代码先提交吗,那肯定会造成影响的呀,那肯定得有办法帮我搞一搞吧,得有: git stash 1.使用 git stash 保存当前的临时工作区,不需要提交代码,可以切换到其他分支进行工作,或者在当前分支上完成其他紧急的工作,比如修订一个bug测试提交。 git stash 2.如果一个使用了一个 gi...

漂亮的滚动条 自定义滚动条样式

滚动条,再熟悉不过的东西了。 只要内容超过屏幕,滚动的时候就会出现在侧边的滚动条,有时候,他真的好丑,粗粗的黑黑的,像被生活磋磨了数百次,不再温柔。 平时写个内容框,内容超出的是也可能需要在狭窄的空间内滚动内容,虽然丝滑,但那黑粗的滚动条,确实吸引了视线,内容怎能人黑粗长的东西吸引了读者的目光。那我们帮帮她吧: 添加样式 .beautiful-scroll-bar-box { ...