Xzavier

行到水穷处，坐看云起时

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

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

Posted by xzavier on March 28, 2020

用CSS3的resize实现拖拽改变大小及分屏 JS实现更多细节

前端开发中，可能遇到需要双屏操作或者左右布局可拖拽的需求。 我们可以用一个盒子装两个左右布局的盒子，左边宽度为 w , 则右边宽度为 100% - w 。 动态的改变w值，即可操控两边的盒子宽窄你来我往。怎么改变呢，你可以这样： 1、设计几个按钮，固定的点选左右盒子宽度比； 2、使用 <input type="range" id="rang-slider" name="r...

Posted by xzavier on February 11, 2020

截图上传 上传clipboardData里的图片内容

疫情期间，在家办公，虽说少了上班路上的消耗，但工位确实没有公司舒服。希望疫情早点过去，我们摘下口罩，欢快地讨论技术和需求。 上传截图在我们平时的开发中少有遇到，遇到了我们就自己实现一把。嗯，截图的事情，与产品讨论后，我们就不实现了，不管是微信，QQ，还是我们自家社交APP，毫无疑问截图这个功能是不可或缺的。 思路 截完图，得找个地方粘贴 粘贴，我们就能拿到剪切板的内容，从而过...

Posted by xzavier on February 6, 2020

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

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

Posted by xzavier on November 6, 2019

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

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

Posted by xzavier on October 3, 2019

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

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

Posted by xzavier on September 29, 2019

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

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

Posted by xzavier on April 28, 2019

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

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

Posted by xzavier on March 2, 2019

Iframe攻防 见招拆招那些事儿

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

Posted by xzavier on September 10, 2018

前端随便玩儿 一些有趣的

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

Posted by xzavier on June 2, 2018

HOT RECOMMENDS
FEATURED TAGS
Javascript Git SublimeText3 Node HTML5 CSS3 React Vue HTTP jQuery 小程序 Essay CSS
ABOUT ME

以梦为码，码梦一生

FRIENDS