Wavesurfer.js是一个基于JavaScript的开源音频波形可视化库。它利用Web Audio API和HTML5 Canvas技术，为音频数据提供了丰富的可视化展示方式。Wavesurfer.js的主要目标是提供一种灵活且易于集成的工具，使开发者能够在网页上创建交互式音频波形可视化。

特点

1. 跨平台兼容性：由于Wavesurfer.js是基于Web标准构建的，因此它可以在任何支持Web Audio API和Canvas的浏览器上运行，包括桌面和移动设备。
2. 多格式支持：Wavesurfer.js支持多种音频格式，如WAV、MP3、OGG等，使开发者能够方便地加载和显示不同类型的音频文件。
3. 高度可定制：Wavesurfer.js提供了丰富的配置选项和API，允许开发者根据自己的需求定制波形的外观、行为以及交互方式。
4. 音频分析功能：除了基本的波形显示，Wavesurfer.js还提供了音频分析功能，如频谱显示、基频检测等，帮助开发者更深入地理解音频数据的特性。
5. 插件架构：Wavesurfer.js采用插件架构，开发者可以通过添加插件来扩展其功能，如添加音频播放控制、区域选择、标记等。
6. 性能优化：Wavesurfer.js在性能方面也进行了优化，即使在处理大型音频文件时也能保持流畅的波形渲染和交互体验。

使用场景

• 音乐播放器：在音乐播放器的网页应用中，使用Wavesurfer.js可以为用户提供一个直观且吸引人的音频波形展示，增强用户体验。
• 音频编辑器：对于需要编辑和处理音频的应用，Wavesurfer.js提供了丰富的音频分析功能和可定制性，使开发者能够构建出功能强大的音频编辑器。
• 教育和学习：在教育和学习领域，Wavesurfer.js可以用于展示音频信号的特性，帮助学生更好地理解音频的概念和原理。
• 音频可视化艺术：Wavesurfer.js的高度可定制性使其成为音频可视化艺术创作的理想选择，开发者可以创造出独特且富有创意的音频波形展示

项目

wavesurfer.js官网wavesurfer

应用

总结

Wavesurfer.js是一个功能强大、易于集成且高度可定制的音频波形可视化库，适用于各种需要音频可视化功能的Web应用场景。

转载请注明：清风亦平凡 » Wavesurfer.js一个开源的音频可视化库

因需要进行文档在线预览，所以才有以下内容。因付费方案不在选择范围，所以只能寻求免费开源的解决方案。经过查找发现除了LibreOffice 、OnlyOffice、kkFileView以外并没有发现其他可用的方案，也许是自己原因没有找到其他开源解决方案吧！由于没有在线编辑的需求，经过对比kkFileView部署以及使用极其简单，所以就选择了kkFileView。

kkFileView

kkFileView为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等

项目特性

• 使用spring boot开发，预览服务搭建部署非常简便
• rest接口提供服务，跨平台特性(java,php,python,go,php,.net….)都支持，应用接入简单方便
• 支持普通http/https文件下载url、http/https文件下载流url、ftp下载url等多种预览源
• 提供zip，tar.gz发行包，提供一键启动脚本和丰富的配置项，方便部署使用
• 提供Docker镜像发行包，方便在容器环境部署
• 抽象预览服务接口，方便二次开发，非常方便添加其他类型文件预览支持

目前支持的文件类型如下:

• 支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx,xlam, xla 等 Office 办公文档
• 支持 wps, dps, et, ett, wpt 等国产 WPS Office 办公文档
• 支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 办公文档
• 支持 vsd, vsdx 等 Visio 流程图文件
• 支持 wmf, emf 等 Windows 系统图像文件
• 支持 psd 等 Photoshop 软件模型文件
• 支持 pdf ,ofd, rtf 等文档
• 支持 xmind 软件模型文件
• 支持 bpmn 工作流文件
• 支持 eml 邮件文件
• 支持 epub 图书文档
• 支持 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件
• 支持 dwg, dxf 等 CAD 模型文件
• 支持 txt, xml(渲染), md(渲染), java, php, py, js, css 等所有纯文本
• 支持 zip, rar, jar, tar, gzip, 7z 等压缩包
• 支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp 等图片预览（翻转，缩放，镜像）
• 支持 tif, tiff 图信息模型文件
• 支持 tga 图像格式文件
• 支持 svg 矢量图像格式文件
• 支持 mp3,wav,mp4,flv 等音视频格式文件
• 支持 avi,mov,rm,webm,ts,rm,mkv,mpeg,ogg,mpg,rmvb,wmv,3gp,ts,swf 等视频格式转码预览

项目地址

GiteeGithub

部署

官方提供多种部署方式，其中包括使用Docker。因目前项目也是Docker部署，所以就使用此部署方式。

拉取镜像

# 网络环境方便访问docker中央仓库
docker pull keking/kkfileview:4.1.0

# 网络环境不方便访问docker中央仓库
wget https://kkview.cn/resource/kkFileView-4.1.0-docker.tar
docker load -i kkFileView-4.1.0-docker.tar

运行

docker run -it -p 8012:8012 keking/kkfileview:4.1.0

浏览器访问容器8012端口 http://127.0.0.1:8012 即可看到项目演示用首页

使用docker-compose

version: '3.4'

services:

  smart-document-service:
    container_name: smart-document-service
    image: keking/kkfileview:4.1.0
    restart: always
    ports:
      - "8012:8012"
    networks: 
      - smart-network-v1
    environment:
     - TZ=Asia/Shanghai
     - KK_FILE_DIR=/data/file  # 文件路径地址
      #KK_BASE_URL: "https://aa.bb.com/preview/"  # 配置nginx方向代理转发需要用到，详见官方文档
     - KK_CONTEXT_PATH=/previewDocuentFile/  # 配置nginx方向代理转发需要用到，详见官方文档
     - KK_OFFICE_PREVIEW_SWITCH_DISABLED=true  # 是否关闭预览切换，默认开启，如果需要关闭，设置为true
    volumes:
      - /data/smart/document_service/file:/data/file

networks:
  smart-network-v1:
    driver: bridge

项目接入

Nginx转发

由于以上内容更改了KK_CONTEXT_PATH，所以我们的转发内容是更改后的内容previewDocuentFile。其实不用Nginx转发也是可以的，由于项目的对外入口就一个，就有了这个Nginx转发的需求。

   location /previewDocuentFile {
          proxy_pass http://smart-document-service:8012;
   }

当您的项目内需要预览文件时，只需要调用浏览器打开本项目的预览接口，并传入须要预览文件的url，示例如下：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>

var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(previewUrl)));

以上方式打开新页面进行预览，如果不开新页面使用iframe也是一样的。

转载请注明：清风亦平凡 » 开源在线文档预览解决方案kkFileView