如何用Vue实现悬浮框自由移动及长尾词录音功能的示例代码？

本文共计2560个文字，预计阅读时间需要11分钟。

目录+效果如下+主要功能+实现

1.封装第一个组件FloatBall.vue+2. 封装第二个组件Audio.vue+3.recorder.js

效果如下主要功能

1.一个漂浮的球体，在全屏幕中自由移动，遇到边缘自动反弹“

目录

• 效果如下
• 主要功能
• 实现
• 1.封装第一个漂浮组件FloatBall.vue
• 2.封装第二个组件录音组件Audio.vue
• 3.recorder.js

效果如下

主要功能

1.一个漂浮的球，在全屏幕中自由移动遇到边边角角自动改变方向 ，自带动画效果

2.录音功能，可以录制用户的声音，可以下载为任意格式的音频文件到本地，也可以通过二进制流发给后端

由于后端要声音文件格式wav或者pcm,采样率16000，所以我改了配置文件，稍后我会介绍在哪里改，改什么什么样都是可以的。

注：代码我已经封装成组件了，下方的代码可以直接稍作修改后拿去用，需要修改的地方我以截图的形式贴出来了。