本文算是目前国内关于浏览器音视频合成,尤其WebCodecs API进行视频合成这块比较稀缺的内容了。
文章关键字 ‘audio’
JS audio加图片序列或canvas转webM/MP4的实现
2023年05月21日,星期日基于howler.js写了个音频播放器组件
2022年03月15日,星期二借助ffmpeg.wasm纯前端实现多音频和视频的合成
2021年03月20日,星期六JS纯前端实现audio音频剪裁剪切复制播放与上传
2020年07月27日,星期一本文演示了如何纯前端对MP3、WAV、OGG等格式音频进行剪辑、剪裁、剪切、复制、播放以及上传等处理,使用Web Audio API,有完整的代码,还有在线demo演示页面,即插即用,希望本文内容可以对你的工作有所帮助。
HTML audio基础API完全使用指南
2019年07月7日,星期日音视频播放暂停控制,播放时长获取,播放速率,以及检测什么时候播放结束,当前媒体资源是否处于暂停状态等,都在本文有所介绍,本文就是audio/video元素各类基础API完全介绍,总能找到你需要的东西。
使用wavesurfer.js显示mp3 audio音频的波形图
2018年12月9日,星期日如果你想实现右图所示的波形图效果,可以借助wavesurfer.js。wavesurfer.js上手简单,扩展丰富,有多达35个可选参数,什么音频速率控制,波形图大小尺寸啊,都完全不在话下。还有好多种方法,对了,还有很多额外的插件,丰富的使用案例。
基本上,你要想对音频进行解析,显示个图形啥的,不要多想了,就wavesurfer,童叟无欺,老少皆宜,居家旅行,开发必备。
二次元live2d看板娘效果中的web前端技术
2018年05月21日,星期一想要在网页中插入看板娘效果,其实很简单,复制复制,粘贴粘贴代码就有了。但具体原理和技术实现是怎样的呢?本文就将介绍Live2D相关技术以及在web网页中的应用。有非常卡哇伊的demo,有必要的截图和源代码展示,希望本文的内容能够对您的学习有所帮助。
利用HTML5 Web Audio API给网页JS交互增加声音
2017年06月10日,星期六HTML5 Web Audio API可以让我们无中生有创造声音,而且是各种音调的声音,换句话说,我们通过JavaScript就会创建一个完整的音乐出来,这可能和我们以前的认知有些不一样,例如点击按钮出现一个点击的音效,传统思维可能是需要JS触发一个<audio>
音频文件的播放,实际上,并不需要任何额外的资源,十几行JS代码就可以搞定,而这就是本文要介绍的内容。
HTML5 Battery电池状态相关API简介
2014年01月27日,星期一随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性。移动端的页面显然会越来越烧电。例如,流畅的动画效果,模糊阴影等视觉体验。因此可能会出现这样的情况,用户电量快不行了,又没有电源来一发,你的网页还呼呼的烧电,显然,用户一旦感觉到浏览这破页面手机电量流失比武大郎那个还快,怕是会红杏出墙,寻找类似西门庆这种更持久的产品了。
因此,如果网页能够感知手机的电源,我们似乎能够为用户做的更多。比方说,当用户电量不足15%, 需要再来一发的时候……
基于HTML5 audio元素播放声音jQuery小插件
2011年04月28日,星期四在我浮生如梦的大学那会儿,貌似flash网站还有点小火,且大凡有点含量的flash站点上,杂七杂八的音效总是少不了。一部分音效是烘托渲染气氛的背景音乐,另外一部分就是促进互动,增强体验的交互声音,例如按钮按下或者是经过时“哔哔”声或是“叭叭”声。而在那个时候,在远离flash的web页面上鲜有声音的交互,即使有,要想实现兼容性,要不借助控件,要不还是通过与flash交互实现。
随着HTML5的推进与普及,很多以前要借助flash才能实现的效果现在可以很轻松地在网页上实现了。例如音频文件的播放。而本文就折腾点小名堂,让jQuery下轻松实现元素hover时播放声音的效果,基于HTML5 audio元素。
外甥打灯笼——照旧,有demo页面,有源文件下载和源代码展示。总之,希望本文的内容能够对您的学习有所帮助。