控制窗体滚动高度 + 音频波形图 + 视频画中画

最新推荐文章于 2023-12-22 14:15:32 发布
最新推荐文章于 2023-12-22 14:15:32 发布
阅读量212 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyoucaoxiaoxiao/article/details/88975185
版权

1 

桌面端控制窗体滚动：  document.documentElement.scrollTop

移动端控制窗体滚动： document.body.scrollTop

document.scrollingElement  不论是pc端还是移动端都适用

2 

音频波形图 使用  wavesurfer.js 显示波形图

3  

// 进入画中画
video.requestPictureInPicture();

get  新技能

 

 

wangyoucaoxiaoxiao
关注
vue-waveform-使用画布波形音频播放器waveurfer组件包含Vue 2.x的时间线条线-Vue.js开发
05-27
用法安装npm -i从“ vue-waveform”导入vue-waveform Vue.use（波形）说明场景websocket数组缓冲文件mp3 aac blob用法安装npm -i vue-waveform从“ vue-waveform导入{waveform} 'Vue.use（波形）说明场景websocket arraybuffer文件mp3 aac blob arraybuffer组件vue波形 props attr类型默认说明WIDTH Number 500画布WIDTH HEIGHT Number 3
vue绘制语音波形图---wavesurfer.js
最新发布
weixin_43956958的博客
02-04 3970
通过XMLHttpRequest对象向后端发出请求，获取音频数据的blob流。然后通过WaveSurfer.create()方法创建一个wavesurfer实例，传入一个容器元素和一些配置选项。最后调用loadBlob()方法将blob数据传递给wavesurfer进行处理。这样就可以在前端使用wavesurfer.js处理后端传递过来的音频数据了。封装websocket。
vue 绘制波形图 wavesurfer.js （音频/视频） 【实用教程】
朝阳39的博客
10-28 4587
一文搞定波形图！
vue 音视频波形图展示（peaks.js）
weixin_46324536的博客
11-24 2957
vue音视频波形图展示
uni-app+vue2 微信小程序 使用canvas绘制折线图/波形图
hihiword的博客
08-23 1701
第二个，因为canvas坐标轴原点默认在左上角顶点，绘制过程中所有坐标点都是相对于该原点的，如果坐标有负数，则会超出canvas，像使用position超出盒子一样。是这样的：因为我需求是每个格子100个点，1024个点共11个格子，如果一个数据点占据一个像素，那么就需要1024个像素，但移动端显然不可能这么大。第四个，至此，格子已经 画好了，由于格子跟图形是分开的，不能互相影响。整体难度不大，但如果不了解canvas绘图原理，还是很麻烦的，如果看不懂文章，建议先去官网看看，有更好的讲述。
C# GDI+ 滚动波形 折线绘图 动态波形
08-25
在本文中，我们将深入探讨如何使用C#中的GDI+技术来实现滚动波形和折线绘图，以及如何创建动态波形效果。GDI+是.NET Framework的一部分，提供了丰富的图形绘制功能，允许开发者创建复杂的视觉元素。 首先，我们要...
c#之滚动字幕动画窗体的实现详解
09-05
在C#编程环境中，创建一个滚动字幕动画窗体是一个有趣且实用的实践，它可以用于各种应用程序，如信息展示、通知或娱乐效果。下面将详细解释如何实现这一功能。 首先，我们需要创建一个新的窗体（Form）。在Visual ...
C# GDI+画移动波形图
11-16
在本主题“C# GDI+画移动波形图”中，我们将深入探讨如何利用C#和GDI+来绘制动态变化的波形图。 首先，波形图通常用于展示声音、数据或其他周期性信号的变化情况。在音频处理中，它能够直观地反映出声音的频率和...
c#滚动字幕动画窗体制作步骤
01-01
c#制作的滚动字幕的动画窗体，刚学的一个例子与大家分享一下 1、先打开vs创建一个工程，创建一个窗体应用程序如下图： 2、从工具箱里向窗体添加lable和timer控件，并设置界面内容，如下图： 3、设置窗体的属性，如...
vue中使用echarts-liquidfill实现水球图
风如也的博客
10-21 8879
先看效果图 echarts-liquidfill查看官方文档 安装 npm install echarts --save npm install echarts-liquidfill --save vue main.js 中注册 import echarts from 'echarts' //引入echarts import 'echarts-liquidfill' 组件中使用 <template> <div style="width:400px;height:400px;" r
Vue + Echarts实现水波图、水球图、水半球样式、圆形水进度条
weixin_71854821的博客
11-20 3684
Vue + Echarts实现水波图、水球图、水半球样式、圆形水进度条，多个波浪水波图，Echarts入门
vue中使用echarts-liquidfill实现水波图
蜗牛~~
05-06 4329
先看效果图： 第一步：在package.json中添加依赖 "echarts": "^4.4.0", "echarts-liquidfill": "^2.0.5", 然后 npm i 注意：先安装低版本的echarts-liquidfill，之前试了3.0以上的版本会报错，echarts版本可随意 第二步：在main.js中引入 import 'echarts-liquidfill' 第三步：使用 html： <div> &lt...
Vue中如何进行音频可视化与音频频谱展示
Java徐师兄的博客
06-17 3273
音频可视化是指将音频信号转换为可视化形式的过程。音频信号可以通过各种数字信号处理技术进行处理，以获得不同的音频可视化效果。一些流行的音频可视化效果包括波形图、频谱图、声纹图等。音频频谱展示是指将音频信号的频谱信息可视化。频谱图通常显示音频信号在不同频率上的强度，可以帮助用户更好地了解音频信号的频率特征。频谱图通常使用FFT（快速傅里叶变换）算法进行计算。通过使用Vue和Web Audio API，可以很容易地实现音频可视化和音频频谱展示功能。本文介绍了如何加载音频文件、初始化。
声纹可视化工具：wavesurfer.js---在Vue中使用音频声纹可视化插件wavesurfer.js【已封装成组件有完整demo实例附完整代码】
热门推荐
南北极之间
12-30 1万+
在Vue中 完整代码在最后。 使用方法： 1、第一步：使用以下命令安装wavesurfer.js插件库 npm install wavesurfer.js --save 2、第二步：在需要使用的页面import导入wavesurfer.js和其中的时间轴timeline插件 import WaveSurfer from 'wavesurfer.js' import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.
echarts使用（3） 曲线图
qq_41281545的博客
06-05 889
在vue框架中，我们可以使用echarts来实现图表。 varchartDom=document.getElementById("echarts_xyza_time"); varmyChart=echarts.init(chartDom); varoption; option={ legend:{ data:['x','y','z','a','x-bias','y-bias','z-b...
在vue中利用highcharts+colormap+canvas实现频谱瀑布图
weixin_42244510的博客
09-06 6314
vue中利用hightcharts+colormap+canvas实现频谱瀑布图
Wavesurfer.js绘制波形图
weixin_47175934的博客
12-22 2425
要使用wavesurfer.js，首先需要在HTML文件中引入Wavesurfer.js库，然后创建一个音频元素并将其添加到页面中。接下来，初始化Wavesurfer实例并配置相关选项。现在，当你运行Vue项目时，wavesurfer.js应该已经成功下载并在页面上显示波形。4. 在Vue组件中引入并使用wavesurfer.js。我没找到wavesurfer.cursor.js文件，就注释了。替换为你要使用的音频文件路径。打开浏览器，查看效果。
vue使用echarts实现动态实时折线图并添加上下限超出变色
qq_42129925的博客
07-29 4612
vue使用echarts实现动态实时折线图并添加上下限超出变色。
vue+wavesurfer.js:画波形图
风一样的少年
04-21 2824
安装 yarn add wavesurfer.js 使用 template <div class="voice-dialog-content"> <div> <Button :type="!isPlaying ? 'primary' : 'warning'" shape="circle" :icon="!isPlaying ? 'ios-play' : 'ios-pause'" @click="playVoice"></Button> &lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值