Uniapp 小程序：语音播放与停息功能的实现及优化方案

界面部分

1. //开启语音
2. <button class="open" v-if="showPlay==false" @click="playText">这是开启播放的图片</button >
4. //关闭语音
5. <button class="close" v-if="showPlay==true" @click="stopText">这是关闭播放的图片</button >

复制代码

播放语音方法 playText

该方法用于处置惩罚语音播放的逻辑，包罗内容截断、分割、重试机制等。

1. playText: function() {
2.     // 检查是否正在等待响应，如果是则提示用户等待
3.     // 切换显示为正在播放状态
4.     this.showPlay = true;
5.     // 初始化重试次数
6.     let retryCount = 0;
7.     // 设置最大重试次数
8.     const maxRetryTimes = 3;
9.     // 重试间隔时间（单位：毫秒）
10.     const retryInterval = 2000;
11.     // 假设最大允许的内容长度，可根据实际调整
12.     const maxContentLength = 100;
14.     // 截断内容的函数，如果内容长度超过最大允许长度，则截取前 maxContentLength 个字符
15.     const truncateContent = (content) => {
16.         if (content.length > maxContentLength) {
17.             return content.slice(0, maxContentLength);
18.         }
19.         return content;
20.     };
22.     // 分割内容的函数，将长内容按合适的分割符号（。！，？）分割成多个部分
23.     const splitContent = (content) => {
24.         const parts = [];
25.         let start = 0;
26.         while (start < content.length) {
27.             let end = start + maxContentLength;
28.             if (end >= content.length) {
29.                 parts.push(content.slice(start));
30.                 break;
31.             }
32.             // 从后往前查找合适的分割符号（。！，？）
33.             let symbolIndices = [content.lastIndexOf('。', end), content.lastIndexOf('!', end), content
34.                .lastIndexOf('?', end), content.lastIndexOf(',', end)
35.             ];
36.             symbolIndices = symbolIndices.filter(index => index > start);
37.             if (symbolIndices.length > 0) {
38.                 end = Math.max(...symbolIndices);
39.             }
40.             parts.push(content.slice(start, end));
41.             start = end + 1;
42.         }
43.         return parts;
44.     };
46.     // 播放分割后的内容部分的函数
47.     const playParts = (parts) => {
48.         let index = 0;
49.         const playNextPart = () => {
50.             if (index < parts.length) {
51.                 const part = parts[index];
52.                 const plugin = requirePlugin('WechatSI');
53.                 // 调用文字转语音插件
54.                 plugin.textToSpeech({
55.                     lang: 'zh_CN',
56.                     tts: true,
57.                     content: part,
58.                     success: (res) => {
59.                         // 创建内部音频上下文并播放音频
60.                         this.innerAudioContext = uni.createInnerAudioContext();
61.                         this.innerAudioContext.src = res.filename;
62.                         this.innerAudioContext.play();
63.                         // 监听音频播放结束事件，播放下一部分
64.                         this.innerAudioContext.onEnded(() => {
65.                             index++;
66.                             playNextPart();
67.                         });
68.                     },
69.                     fail: (res) => {
70.                         console.log('文字转语音失败', res);
71.                         if (retryCount < maxRetryTimes) {
72.                             retryCount++;
73.                             console.log(`正在进行第${retryCount}次重试...`);
74.                             // 重试播放
75.                             setTimeout(() => playNextPart(), retryInterval);
76.                         } else {
77.                             console.log('已达到最大重试次数，文字转语音仍失败');
78.                         }
79.                     }
80.                 });
81.             } else {
82.                 // 所有部分播放完毕，切换显示为可播放状态
83.                 this.showPlay = false;
84.             }
85.         };
86.         playNextPart();
87.     };
89.     // 截断内容
90.     const truncatedContent = truncateContent(this.readContent);
91.     // 分割内容
92.     const splitContents = splitContent(this.readContent);
93.     if (splitContents.length > 1) {
94.         // 如果分割后的内容部分大于 1，则按部分播放
95.         playParts(splitContents);
96.     } else {
97.         // 内容较短，直接播放
98.         const retryFn = () => {
99.             if (retryCount < maxRetryTimes) {
100.                 retryCount++;
101.                 console.log(`正在进行第${retryCount}次重试...`);
102.                 const plugin = requirePlugin('WechatSI');
103.                 // 调用文字转语音插件
104.                 plugin.textToSpeech({
105.                     lang: 'zh_CN',
106.                     tts: true,
107.                     content: truncatedContent,
108.                     success: (res) => {
109.                         // 创建内部音频上下文并播放音频
110.                         this.innerAudioContext = uni.createInnerAudioContext();
111.                         this.innerAudioContext.src = res.filename;
112.                         this.innerAudioContext.play();
113.                     },
114.                     fail: (res) => {
115.                         console.log('文字转语音失败', res);
116.                         // 重试播放
117.                         setTimeout(retryFn, retryInterval);
118.                     }
119.                 });
120.             } else {
121.                 console.log('已达到最大重试次数，文字转语音仍失败');
122.             }
123.         };
124.         const plugin = requirePlugin('WechatSI');
125.         // 调用文字转语音插件
126.         plugin.textToSpeech({
127.             lang: 'zh_CN',
128.             tts: true,
129.             content: truncatedContent,
130.             success: (res) => {
131.                 // 创建内部音频上下文并播放音频
132.                 this.innerAudioContext = uni.createInnerAudioContext();
133.                 this.innerAudioContext.src = res.filename;
134.                 this.innerAudioContext.play();
135.             },
136.             fail: (res) => {
137.                 console.log('文字转语音失败', res);
138.                 // 重试播放
139.                 setTimeout(retryFn, retryInterval);
140.             }
141.         });
142.     }
143. }

复制代码

停息语音方法 stopText

该方法用于停止语音播放并开释资源。

1. stopText() {
2.     // 切换显示为可播放状态
3.     this.showPlay = false;
4.     if (this.innerAudioContext) {
5.         // 停止播放
6.         this.innerAudioContext.stop();
7.         // 释放资源
8.         this.innerAudioContext = null;
9.     }
10. }

复制代码

页面埋伏和卸载时的处置惩罚

在页面埋伏和卸载时，调用 stopText 方法停止语音播放。

1. onHide() {
2.     this.stopText()
3. },
4. onUnload() {
5.     this.stopText()
6. }

复制代码

总结
这段代码实现了语音播放和停息的功能，通过界面上的按钮触发相应的操纵。在播放语音时，会对内容举行截断和分割处置惩罚，以适应笔墨转语音插件的要求。同时，为了进步稳定性，添加了重试机制。在页面埋伏和卸载时，会自动停止语音播放并开释资源。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。