在项目中开发中，遇到这样的需求：有一段文字，需要通过后台接口转成语音传到前端进行播放。 因为文字是实时生成的，为保证实时性，需要在生成文字的过程中，转为一段一段的音频流通过websocket传递到前端，前端拿到音频流后立即开始播放，接收到后续的音频流后追加到播放音频里继续播放，达到实时生成文字，实时转换音频流，前端实时播放的效果。 类似于腾讯元宝小程序。这个怎么实现

mina-popups [代码]mina-popups[代码]，一个方便、轻量的 小程序 弹出组件集合 change log： 2021.02.22 init package 层叠顺序规范 mask: 100 popups: 200 所以 page 下一层的业务样式层叠顺序层级应 < 100 主要的组件 popup 组件整合 [代码]popup[代码] 的通用逻辑：弹出位置，背景 mask，函数式控制显隐 并对 fixed 模式升级，不仅支持直接传入 left、top 控制 [代码]popup[代码] 位置，还支持传入 selector 自动设置 [代码]popup[代码] 位置 [图片] [图片] [图片] [图片] [图片] [代码]left[代码] [代码]top[代码] [代码]right[代码] [代码]bottom[代码] [代码]center[代码] [图片] [图片] [图片] [代码]fixed[代码] [代码]selector[代码] [代码]fixed[代码] [代码]left&top[代码] popover 在 [代码]popup[代码] 的基础上，完善气泡菜单的通用逻辑 使用者只需要在 slot 里添加提示或者菜单内容即可 [代码]popover[代码] 会根据触发位置自动改变展示方向 [图片] [图片] [图片] 气泡菜单 tooltip menu-popover 在 [代码]popover[代码] 的基础上，针对小程序引导添加我的小程序的场景，自动将 popover 定位到小程序胶囊下方 组件自动识别页面 [代码]navigationStyle: custom[代码] 属性，优化展示位，使用者无需关心适配问题 [图片] [图片] 胶囊气泡 使用方法 大致可以分为 2 步： npm 安装 [代码]mina-popups[代码]，开发工具构建 npm 引入并使用 [代码]mina-popups[代码] 组件 命令行 [代码]npm install mina-popups[代码] 安装完成后，开发工具构建 npm *.json [代码]{ "usingComponents": { "popup": "mina-popups/popup", "popover": "mina-popups/popover", "menu-popover": "mina-popups/menu-popover" } } [代码] *.wxml 在 view 上利用 popups 处理渲染逻辑 具体属性使用介绍请点击文章下方Github连接进行查看 [代码]<popup show="{{popup.show}}" position="{{popup.position}}" mask="{{popup.mask}}" catchScroll="{{popup.catchScroll}}" tapMaskClose="{{popup.tapMaskClose}}" scrollMaskClose="{{popup.scrollMaskClose}}" maskColor="{{popup.maskColor}}" selector="{{popup.selector}}" left="{{popup.left}}" top="{{popup.top}}" unit="{{popup.unit}}" bind:position="position" > <!-- popup-inner-wxml --> </popup> <popover show="{{popover.show}}" mask="{{popover.mask}}" catchScroll="{{popover.catchScroll}}" tapMaskClose="{{popover.tapMaskClose}}" scrollMaskClose="{{popover.scrollMaskClose}}" maskColor="{{popover.maskColor}}" left="{{popover.left}}" top="{{popover.top}}" unit="{{popover.unit}}" translateX="{{popover.translateX}}" > <!-- popover-inner-wxml --> </popover> <menu-popover show="{{show}}"> <!-- menu-popover-inner-wxml --> </menu-popover> [代码] 具体属性使用介绍请点击文章下方Github连接进行查看 注意事项 popups 对于层叠顺序的设计为：mask-100，popup-200，所以为了保证 popups 在页面不被遮挡，Page 下一层的业务样式层叠顺序不要超过 100。 以上简单几步即可使用 mina-popups 具体使用请查看Github https://github.com/Yrobot/mina-popups 如果喜欢mina-popups，记得在github点个 start 哦！🌟🌟🌟