【音视频处理】音频文件裁剪与上传

前言

本文接上文,是音视频处理专题文章,上节说了视频上传截取封面。本文介绍音频上传。(最近发现张鑫旭大神也更新了类似文章,本文借鉴其文章,作为音频上传专题文章)

原理

其实音频截取原理也是ArrayBuffer转AudioBuffer 然后创建一个空的AudioBuffer,复制现有的通道数据前3秒的数据,然后复制的内容写入到这个空的AudioBuffer,于是我们就得到了一个剪裁后的音频Buffer数据了。

案例

【音视频处理】纯js实现上传视频,截取关键帧作为封面,上传后端保存

前言

本篇文章是上一篇文章的一个应用。实现视频上传,截取关键帧,并上传给后端保存。这个场景比较多见,今天就说说实现方式吧。原理很简单,就是通过canvas获取某一帧的base64格式,然后转换为file格式,再通过ajax上传给服务端,保存缩略图。

案例

直接上案例吧:

html

<input type="file"/>

首先创建一个video,然后再选取视频文件之后,自动添加到body中

JS 文件base64、File、Blob、ArrayBuffer 介绍及互转

前言

今天介绍一下文件的二进制家族js,file,base64,File,Blob,ArrayBuffer。 案例,假如有一个需求,我们通过解析等方式拿到了文件的二进制uint8array 或者base64或者blob,我们如何通过ajax提交给后端接口呢?

二进制互转

1. file对象转base64

  let reader = new FileReader();
  reader.readAsDataURL(file[0])
  console.log(reader)

CSS篇2——有关布局的那些事

前言

本文理一下CSS布局的一些事。CSS布局要注意哪些点。其实CSS布局是有技巧的,不同人布局页面,最后出来的效果可能差不多,但是一些布局细节可能差很多。本文不讲stiky footer 布局,圣杯双飞翼等等的布局方式,就说一下一些常用的布局技巧。

一、少用定死宽度

布局的时候,少用定死的宽度,假如真的用宽度,外层用就可以,尽量让宽度和影响宽度的padding\border(有时候也包含margin),分开来布局。

1、避免用定死宽度布局

布局的时候,不要用定死宽度和float布局。可以采用左侧固定,右侧自适应,或者flex布局方式进行。

2、宽度分离 确实要用宽度的时候,在外层用,避免宽度和padding\border一起使用,推荐如下:

CSS篇1——有关文本处理font的那些事

前言

之前博客文章不成体系,主要是一些突然想到的零散知识点。本文及后面几篇文章,将推出一系列文章。帮忙梳理知识点。提高技能。本文着重讲解css有关文本处理font的那些事。之所以先从font说起,是因为UED对字体要求比较高,很多朋友还原UED设计稿之后,出来的效果,UED并不满意。其中,除了屏幕,自适应等原因之外,字体文本处理也是一个重要因素。

1、ex 实现文字和图标垂直居中

ex单位IE6时代就支持了,主要是相对字母x的高度,可以实现文字和图标对齐,不受文字字体和字号的影响。