音视频专栏
文章平均质量分 56
这个专栏会进行分享前端音视频相关的一些技术
不知名前端
恢复更新
展开
-
wands一个轻松实现音视频播放控制的库
前言随着短视频业务越来越火爆,很多公司都想在这个赛道争一口饭吃, 作为开发者来说, 当第一次接手音视频项目的时候,包括我在内的很多人都是表示非常的头大, web上充斥着各种教程,各种api应接不暇, 中间也有着实不少的坑在等着我们.所以我就想利用业余时间,将工作中的一些方案,抽象出来分享给大家.wands这是一个针对h5原生video, audio标签的一个扩展功能库,体量也很小, 对于不熟悉音视频API, 可以说是一个比较方便的选择.目前还不是特别完善,后期会逐步添加新的功能,逐步将它打造成一个可以原创 2021-06-20 14:16:01 · 146 阅读 · 0 评论 -
js实现录音功能,页面title上的小红点如何去掉
前言在解决这个问题之前,如果你想了解js如何实现录音功能,请看我的另一片博客:https://blog.csdn.net/yun_master/article/details/114550332?spm=1001.2014.3001.5501title上的小红点是什么当你获取了用户的录音权限之后,每次进入到这个录音页面,你都会发现这个小红点.当然这也不是太大的问题.不过当你遇到一个比较钻牛角尖的测试,或者是交互,抑或是pd.此时这个问题,就有可能成了你最头疼的问题.下面我们来解决一下这个问题解决原创 2021-03-27 14:19:49 · 1175 阅读 · 0 评论 -
如何使用js实现下载视频,并且不跳转页面
js实现下载文件,相信99%的前端都能轻松实现,但是如果下载的是视频,相信有的朋友肯定遇到过,视频没有下载,而是跳转了.一个小小的坑,下面我来分享一些方法避免这个问题首先先来一个普通文件的下载实现方式a标签直接通过url下载文件(视频会发生跳转) function download(url,name){ const a = document.createElement("a"); a.href = url; a.download = name; a.click(); }a标签通过原创 2021-03-08 21:56:34 · 13149 阅读 · 17 评论 -
前端js实现录音
获取权限function getUserAuthI(){ return new Promise((resolve,reject) => { if(navigator.mediaDevices.getUserMedia){ const options = { audio:true }; navigator.mediaDevices.getUserMedia(options) .then( stream => { resovle({ statue:true原创 2021-03-08 21:36:03 · 2607 阅读 · 0 评论 -
js实现音频PCM数据合并、拼接、裁剪、调节音量等功能
关于音频的内容,我边学习,边实践也总结了一些,从最开始实现一个简单的web音乐播放器的自定义工具栏,到后来的实现简单的音频频谱图.直到今天的对音频数据进行的进一步操作,我也是一点点的在进步.虽然很多地方,并不是那么完美和准确,但是希望能和大家能共同学习进步.一、准备工作声音的基本原理首先关于音频的一些原理性的内容,在之前的https://blog.csdn.net/yun_master/article/details/104133520关于音频频谱的博客中已经简单介绍过了,这里就不详细展开来说了前端原创 2021-03-08 21:01:20 · 6621 阅读 · 2 评论 -
H5原生video标签相关事件,自定义时间轴功能
前言:video标签不仅仅可以实现一段网络视频的播放,同时也开放了多媒体操作相关的事件,所以我们可以通过原生的video标签,来实现一个简单的网页版自定义的播放器导语:1.html结构;2.video标签的事件;3.利用事件自定义播放器功能;一、html结构:<video class="testVideo" preload="auto"> <source src="...原创 2020-02-22 14:20:26 · 3818 阅读 · 0 评论 -
如何使用H5+canvas实现简单的音频频谱图
导语:近期工作上遇到了一个利用H5实现一个音频播放器,同时要具有音频可视化的实现,刚听说这个需求的时候还是很懵逼的,也去做了调研,没找到开源的可使用的组件,于是乎自己边查资料边摸索边实践,还真的瞎猫碰到死耗子,给弄出来了。废话少说,下面将分为两个部分来分享这个频谱是如何通过H5来实现的本案例是通过声音振幅绘制的频谱图,如果对频谱图有其他严格要求的,本案例并不适用此处借鉴了网易云音乐前端技术团队...原创 2020-02-01 18:27:28 · 6745 阅读 · 10 评论