讯飞文字合成语音在iOS手机上的坑

最近在搞一个移动端的react项目，必要用的讯飞的文字转语音的api开辟，考虑后让我们前端自己处理了，所以自己就去研究了讯飞的web文档语音合成（流式版）WebAPI 文档 | 讯飞开放平台文档中央
其时把demo下载下来在欣赏器运行的时候觉得结果还可以，就直接采用这个方法进行开辟了，随后部署到服务器的时候，才想起来iOS手机上一个很致命的问题，iOS手机和欣赏器不答应自动播放音频文件，因此在运行讯飞demo的时候你就会发现，输入文字合成音频后不会播放（可能是我自己的方法的问题），必要再次手动触发一次点击？我们的需求是点击文字就直接进行播放，天塌了
又重新研究了一下demo的代码，结果demo里面关键的AudioPlayer（index.umd.js）是压缩的代码，没办法就提交了工单，问技能职员要到了未压缩的版本，有兴趣的可以自己研究一下，代码如下：

1. import {geWAV, getPCM} from "./download"
2. type IStatus = "uninit" | "init" | "play" | "pause" | "stop";
3. type ISaveAudioData = "pcm" | "wav";
6. class AudioPlayer {
7.   constructor(processorPath?: string) {
8.     this.processor = new Worker(`${processorPath}/processor.worker.js`);
9.   }
10.   private toSampleRate: number = 22050;
11.   private resumePlayDuration: number = 1000;
12.   private fromSampleRate: number = 16000;
13.   private isAudioDataEnded: boolean = false;
14.   private playAudioTime?: any
15.   private status: IStatus = "uninit";
16.   private audioContext?: AudioContext;
17.   private bufferSource?: AudioBufferSourceNode;
18.   private audioDatas: Float32Array[] = [];
19.   private pcmAudioDatas: Int16Array[] = [];
20.   private audioDataOffset: number = 0;
21.   private processor: Worker;
22.   postMessage({
23.     type,
24.     data,
25.     isLastData
26.   }: {
27.     type: "base64" | "string" | "Int16Array" | "Float32Array";
28.     data: string | Int16Array | Float32Array;
29.     isLastData: boolean
30.   }) {
31.     if (this.status === "uninit") {
32.       return
33.     }
34.     this.processor.postMessage({
35.       type,
36.       data,
37.     });
38.     this.isAudioDataEnded = isLastData;
39.   }
40.   private onPlay?: () => void;
41.   private onStop?: (audioDatas: Float32Array[]) => void;
42.   private playAudio() {
43.     clearTimeout(this.playAudioTime)
44.     if (this.audioContext) {
45.       let audioDataLen = 0;
46.       for (let i = this.audioDataOffset; i < this.audioDatas.length; i++) {
47.         audioDataLen += this.audioDatas[i].length;
48.       }
49.       if (!audioDataLen) {
50.         if (this.status === "play") {
51.           if (this.isAudioDataEnded || this.resumePlayDuration <= 0) {
52.             this.stop();
53.           } else {
54.             this.playAudioTime = setTimeout(() => {
55.               this.playAudio()
56.             }, this.resumePlayDuration)
57.           }
58.         }
59.         return;
60.       }
61.       let audioBuffer = this.audioContext.createBuffer(
62.         1,
63.         audioDataLen,
64.         this.toSampleRate
65.       );
66.       let channelData = audioBuffer.getChannelData(0);
67.       let audioData = this.audioDatas[this.audioDataOffset];
68.       let offset = 0;
69.       while (audioData) {
70.         this.audioDataOffset += 1;
71.         if (audioBuffer.copyToChannel) {
72.           audioBuffer.copyToChannel(audioData, 0, offset);
73.           offset += audioData.length;
74.         } else {
75.           for (let i = 0; i < audioData.length; i++) {
76.             channelData[i] = audioData[i];
77.           }
78.         }
79.         audioData = this.audioDatas[this.audioDataOffset];
80.       }
81.       let bufferSource = this.audioContext.createBufferSource();
82.       this.bufferSource = bufferSource;
83.       bufferSource.buffer = audioBuffer;
84.       bufferSource.connect(this.audioContext.destination);
85.       bufferSource.start();
86.       bufferSource.onended = (event) => {
87.         if (this.status !== "play") {
88.           return;
89.         }
90.         if (this.audioDatas.length) {
91.           this.playAudio();
92.         } else if (this.isAudioDataEnded || this.resumePlayDuration <= 0) {
93.           this.stop();
94.         } else {
95.           this.playAudioTime = setTimeout(() => {
96.             this.playAudio()
97.           }, this.resumePlayDuration)
98.         }
99.       };
100.     }
101.   }
102.   reset() {
103.     this.processor.onmessage = null;
104.     this.audioDataOffset = 0;
105.     this.audioDatas = [];
106.     this.pcmAudioDatas = [];
107.     this.status = "uninit";
108.     this.isAudioDataEnded = false;
109.     clearTimeout(this.playAudioTime)
110.     try {
111.       this.bufferSource?.stop();
112.     } catch (e) {
113.       console.log(e);
114.     }
115.   }
116.   start({
117.     autoPlay = true,
118.     sampleRate = 16000,
119.     resumePlayDuration = 1000
120.   }: {
121.     autoPlay?: boolean;
122.     sampleRate?: number;
123.     resumePlayDuration?: number;
124.   } = {}) {
125.     this.reset();
126.     this.status = "init";
127.     this.resumePlayDuration = resumePlayDuration
128.     let fromSampleRate = sampleRate;
129.     let toSampleRate = Math.max(fromSampleRate, 22050);
130.     toSampleRate = Math.min(toSampleRate, 96000);
131.     this.fromSampleRate = fromSampleRate;
132.     this.toSampleRate = toSampleRate;
133.     this.processor.postMessage({
134.       type: "init",
135.       data: {
136.         fromSampleRate,
137.         toSampleRate,
138.       },
139.     });
140.     this.processor.onmessage = (event) => {
141.       const { audioData, pcmAudioData } = event.data;
142.       this.audioDatas.push(audioData);
143.       this.pcmAudioDatas.push(pcmAudioData);
144.       if (this.audioDatas.length === 1 && autoPlay && this.status === "init") {
145.         this.play();
146.       }
147.     };
148.   }
149.   play() {
150.     if (!this.audioContext) {
151.       this.audioContext = new (window.AudioContext ||
152.         (window as any).webkitAudioContext)();
153.       this.audioContext.resume();
154.     }
155.     if (this.audioContext) {
156.       this.status = "play";
157.       this.onPlay?.();
158.       this.playAudio();
159.     }
160.   }
161.   stop() {
162.     this.audioDataOffset = 0;
163.     this.status = "stop";
164.     clearTimeout(this.playAudioTime)
165.     try {
166.       this.bufferSource?.stop();
167.       this.onStop?.(this.audioDatas);
168.     } catch (e) {
169.       console.log(e);
170.     }
171.   }
172.   getAudioDataBlob(type: ISaveAudioData) {
173.     if (!this.pcmAudioDatas?.length) {
174.       return undefined
175.     }
176.     if (type === "wav") {
177.       return geWAV(this.pcmAudioDatas, this.fromSampleRate, 16)
178.     }
179.     return getPCM(this.pcmAudioDatas)
180.   }
181. }
183. export default AudioPlayer;

复制代码

接下来就是对代码进行二次开辟，我不太会用文字去解说代码和流程，我就跟我们项目的需求来简单的说一下改动代码，针对在play音频的时候，判断一下音频的状态（iOS自动播放音乐是suspended状态）；

1. if (this.audioContext.state === 'suspended') {
2.       this.audioContext.resume().then(() => {
3.         console.log('AudioContext resumed during play');
4.       }).catch(err => {
5.         console.error('Failed to resume AudioContext:', err);
6.       });
7.     }

复制代码

确保 AudioContext 在调用音频播放功能之前处于活动状态，同时根据我们的需求添加了暂停播放的功能

1. // 暂停播放
2.   pause() {
3.     if (this.audioContext && this.status === "play") {
4.       this.audioContext.suspend();
5.       this.status = "pause";
6.       this.onPause?.();
7.     }
8.   }
10.   // 恢复播放
11.   resume() {
12.     if (this.audioContext && this.status === "pause") {
13.       console.log(this.status)
14.       this.audioContext.resume();
15.       this.status = "play";
16.       this.onResume?.();
17.       this.playAudio();
18.     }
19.   }

复制代码

这个就是这次改动的关键，一会我会放上完整的代码和调用，这个就是通过交互事故（如 click 或 touchstart）解锁 AudioContext，以应对IOS欣赏器默认暂停 AudioContext 的问题。

1. // 解锁 AudioContext
2.   unlockAudioContext() {
3.     if (!this.audioContext) {
4.       this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
5.     }
6.     if (this.audioContext.state === 'suspended') {
7.       const unlock = () => {
8.         this.audioContext?.resume().then(() => {
9.           this.isAudioContextUnlocked = true; // 标记为已解锁
10.           console.log('AudioContext unlocked');
11.           document.removeEventListener('click', unlock); // 解锁后移除事件监听
12.           document.removeEventListener('touchstart', unlock);
13.         }).catch(err => {
14.           console.error('Failed to unlock AudioContext:', err);
15.         });
16.       };
17.       document.addEventListener('click', unlock);
18.       document.addEventListener('touchstart', unlock);
19.     } else {
20.       this.isAudioContextUnlocked = true; // 已经解锁
21.     }
22.   }

复制代码

所以完整版的AudioPlayer.ts代码是

1. type IStatus = "uninit" | "init" | "play" | "pause" | "stop";let currentPlayer: AudioPlayer | null = null; class AudioPlayer {  constructor(processorPath?: string) {    this.processor = new Worker(`${processorPath}/processor.worker.js`);  }  private toSampleRate: number = 22050;  private resumePlayDuration: number = 1000;  private fromSampleRate: number = 16000;  private isAudioDataEnded: boolean = false;  private playAudioTime?: any;  private status: IStatus = "uninit";  private audioContext?: AudioContext;  private bufferSource?: AudioBufferSourceNode;  private audioDatas: Float32Array[] = [];  private pcmAudioDatas: Int16Array[] = [];  private audioDataOffset: number = 0;  private processor: Worker;  private isAudioContextUnlocked: boolean = false; // 标志 AudioContext 是否解锁  private onPlay?: () => void;  private onPause?: () => void; // 添加 pause 回调  private onResume?: () => void; // 添加 resume 回调  private onStop?: (audioDatas: Float32Array[]) => void;  private onPlaybackComplete?: () => void;  // 添加音频播放完成回调  // 设置音频数据  postMessage({    type,    data,    isLastData  }: {    type: "base64" | "string" | "Int16Array" | "Float32Array";    data: string | Int16Array | Float32Array;    isLastData: boolean;  }) {    if (this.status === "uninit") {      return;    }    this.processor.postMessage({      type,      data,    });    this.isAudioDataEnded = isLastData;  }  // 播放音频  private playAudio() {    clearTimeout(this.playAudioTime);    if (this.audioContext) {      let audioDataLen = 0;      for (let i = this.audioDataOffset; i < this.audioDatas.length; i++) {        audioDataLen += this.audioDatas[i].length;      }      if (!audioDataLen) {        if (this.status === "play") {          if (this.isAudioDataEnded || this.resumePlayDuration <= 0) {            this.stop();            // 音频播放完成时调用回调            this.onPlaybackComplete?.();          } else {            this.playAudioTime = setTimeout(() => {              this.playAudio();            }, this.resumePlayDuration);          }        }        return;      }      let audioBuffer = this.audioContext.createBuffer(        1,        audioDataLen,        this.toSampleRate      );      let channelData = audioBuffer.getChannelData(0);      let audioData = this.audioDatas[this.audioDataOffset];      let offset = 0;      while (audioData) {        this.audioDataOffset += 1;        if (audioBuffer.copyToChannel) {          audioBuffer.copyToChannel(audioData, 0, offset);          offset += audioData.length;        } else {          for (let i = 0; i < audioData.length; i++) {            channelData[i] = audioData[i];          }        }        audioData = this.audioDatas[this.audioDataOffset];      }      let bufferSource = this.audioContext.createBufferSource();      this.bufferSource = bufferSource;      bufferSource.buffer = audioBuffer;      bufferSource.connect(this.audioContext.destination);      bufferSource.start();      bufferSource.onended = () => {        if (this.status !== "play") {          return;        }        if (this.audioDatas.length) {          this.playAudio();        } else if (this.isAudioDataEnded || this.resumePlayDuration <= 0) {          this.stop();        } else {          this.playAudioTime = setTimeout(() => {            this.playAudio();          }, this.resumePlayDuration);        }      };    }  }  // 添加播放完毕的回调  setPlaybackCompleteCallback(callback: () => void) {    this.onPlaybackComplete = callback;  }  // 重置播放器  reset() {    this.processor.onmessage = null;    this.audioDataOffset = 0;    this.audioDatas = [];    this.pcmAudioDatas = [];    this.status = "uninit";    this.isAudioDataEnded = false;    clearTimeout(this.playAudioTime);    try {      this.bufferSource?.stop();    } catch (e) {      console.log(e);    }  }  // 初始化播放器并设置参数  start({    autoPlay = true,    sampleRate = 16000,    resumePlayDuration = 1000,  }: {    autoPlay?: boolean;    sampleRate?: number;    resumePlayDuration?: number;  } = {}) {    this.reset();    this.status = "init";    this.resumePlayDuration = resumePlayDuration;    let fromSampleRate = sampleRate;    let toSampleRate = Math.max(fromSampleRate, 22050);    toSampleRate = Math.min(toSampleRate, 96000);    this.fromSampleRate = fromSampleRate;    this.toSampleRate = toSampleRate;    this.processor.postMessage({      type: "init",      data: {        fromSampleRate,        toSampleRate,      },    });    this.processor.onmessage = (event) => {      const { audioData, pcmAudioData } = event.data;      this.audioDatas.push(audioData);      this.pcmAudioDatas.push(pcmAudioData);      if (this.audioDatas.length === 1 && autoPlay && this.status === "init") {        this.play();      }    };  }  // 解锁 AudioContext
2.   unlockAudioContext() {
3.     if (!this.audioContext) {
4.       this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
5.     }
6.     if (this.audioContext.state === 'suspended') {
7.       const unlock = () => {
8.         this.audioContext?.resume().then(() => {
9.           this.isAudioContextUnlocked = true; // 标记为已解锁
10.           console.log('AudioContext unlocked');
11.           document.removeEventListener('click', unlock); // 解锁后移除事件监听
12.           document.removeEventListener('touchstart', unlock);
13.         }).catch(err => {
14.           console.error('Failed to unlock AudioContext:', err);
15.         });
16.       };
17.       document.addEventListener('click', unlock);
18.       document.addEventListener('touchstart', unlock);
19.     } else {
20.       this.isAudioContextUnlocked = true; // 已经解锁
21.     }
22.   }  // 停止当前音频并播放新音频  pauseCurrentAudio() {    if (currentPlayer) {      currentPlayer.stop(); // 彻底停止当前音频      currentPlayer = null; // 停止后清除当前播放器实例    }  }  // 播放音频  play() {    if (currentPlayer) {      currentPlayer.stop(); // 停止当前音频    }    if (!this.audioContext) {      this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();    }    if (this.audioContext.state === 'suspended') {
23.       this.audioContext.resume().then(() => {
24.         console.log('AudioContext resumed during play');
25.       }).catch(err => {
26.         console.error('Failed to resume AudioContext:', err);
27.       });
28.     }    if (this.audioContext) {      currentPlayer = this;       this.status = "play";      this.onPlay?.();      this.playAudio();    }  }  // 暂停播放
29.   pause() {
30.     if (this.audioContext && this.status === "play") {
31.       this.audioContext.suspend();
32.       this.status = "pause";
33.       this.onPause?.();
34.     }
35.   }
37.   // 恢复播放
38.   resume() {
39.     if (this.audioContext && this.status === "pause") {
40.       console.log(this.status)
41.       this.audioContext.resume();
42.       this.status = "play";
43.       this.onResume?.();
44.       this.playAudio();
45.     }
46.   }  // 停止播放  stop() {    this.audioDataOffset = 0;    this.status = "stop";    clearTimeout(this.playAudioTime);    try {      this.bufferSource?.stop();      this.onStop?.(this.audioDatas);    } catch (e) {      console.log(e);    }  }}export default AudioPlayer;

复制代码

说完AudioPlayer。下面是我封装好的文字转音频方法，必要把appId，apiKey和apiSecret更换为你自己的，肯定要留意把demo里面的processor.worker.js导入到你的项目里面

1. import { useState, useRef, useCallback, useEffect } from 'react';
2. import CryptoJS from 'crypto-js';
3. import { Base64 } from 'js-base64';
4. import AudioPlayer from '../utils/audio.umd';
6. const Status = {
7.   UNDEFINED: 'UNDEFINED',
8.   CONNECTING: 'CONNECTING',
9.   STOP: 'STOP',
10. };
12. interface UseTextToSpeechOptions {
13.   onPlaybackComplete: () => void;
14. }
16. const appId = '';
17. const apiKey = '';
18. const apiSecret = '';
20. const getWebSocketUrl = (): string => {
21.   const host = 'tts-api.xfyun.cn';
22.   const date = new Date().toGMTString();
23.   const algorithm = 'hmac-sha256';
24.   const headers = 'host date request-line';
25.   const signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/tts HTTP/1.1`;
26.   const signatureSha = CryptoJS.HmacSHA256(signatureOrigin, apiSecret);
27.   const signature = CryptoJS.enc.Base64.stringify(signatureSha);
28.   const authorizationOrigin = `api_key="${apiKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
29.   const authorization = btoa(authorizationOrigin);
30.   return `wss://tts-api.xfyun.cn/v2/tts?authorization=${authorization}&date=${date}&host=${host}`;
31. };
33. const encodeText = (text: string): string => {
34.   return Base64.encode(text);
35. };
37. const useTextToSpeech = ({ onPlaybackComplete }: UseTextToSpeechOptions) => {
38.   const [error, setError] = useState<string | null>(null);
39.   const [status, setStatus] = useState(Status.UNDEFINED);
40.   const audioPlayerRef = useRef<any>(null);
41.   const socketRef = useRef<WebSocket | null>(null);
43.   if (!audioPlayerRef.current) {
44.     audioPlayerRef.current = new AudioPlayer("");
45.   }
47.   // 设置音频播放完成回调
48.   useEffect(() => {
49.     if (audioPlayerRef.current) {
50.       console.log("调用结束");
51.       audioPlayerRef.current.setPlaybackCompleteCallback(() => {
52.         onPlaybackComplete();
53.       });
54.     }
55.   }, [onPlaybackComplete]);
57.   const changeStatus = (newStatus: string) => {
58.     setStatus(newStatus);
59.   };
61.   const startSynthesis = useCallback(async (text: string) => {
62.     if (!audioPlayerRef.current) {
63.       audioPlayerRef.current = new AudioPlayer("");
64.     }
65.   
66.     audioPlayerRef.current.unlockAudioContext();
67.   
68.     const ws = new WebSocket(getWebSocketUrl());
69.     socketRef.current = ws;
70.   
71.     ws.onopen = (e) => {
72.       audioPlayerRef.current.start({
73.         autoPlay: true,
74.         sampleRate: 16000,
75.         resumePlayDuration: 1000
76.       });
77.       changeStatus(Status.CONNECTING);
78.       var params = {
79.         common: {
80.           app_id: appId,
81.         },
82.         business: { aue: 'raw', auf: 'audio/L16;rate=16000', vcn: 'x4_doudou', tte: 'UTF8' },
83.         data: {
84.           status: 2,
85.           text: encodeText(text),
86.         },
87.       };
88.       ws.send(JSON.stringify(params));
89.     };
90.   
91.     ws.onmessage = async (event: MessageEvent) => {
92.       const response = JSON.parse(event.data);
93.       if (response.code !== 0) {
94.         setError(`合成错误: ${response.code}`);
95.         changeStatus(Status.UNDEFINED);
96.         ws.close();
97.         return;
98.       }
100.       audioPlayerRef.current?.postMessage({
101.         type: "base64",
102.         data: response.data.audio,
103.         isLastData: response.data.status === 2,
104.       });
106.       if (response.code === 0 && response.data.status === 2) {
107.         ws.close();
108.       }
109.     };
110.   
111.     ws.onerror = (err) => {
112.       console.error('WebSocket 发生错误:', err);
113.       setError('WebSocket 错误');
114.       changeStatus(Status.UNDEFINED);
115.     };
116.   
117.     ws.onclose = () => {
118.       console.log('WebSocket 已关闭');
119.       changeStatus(Status.STOP);
120.     };
121.   }, [onPlaybackComplete]);
123.   const stopSynthesis = useCallback(() => {
124.     if (socketRef.current) {
125.       socketRef.current.close();
126.       socketRef.current = null;
127.       console.log('WebSocket 连接已手动关闭');
128.       changeStatus(Status.STOP);
129.     }
131.     if (audioPlayerRef.current) {
132.       audioPlayerRef.current.stop();
133.       audioPlayerRef.current = null;
134.     }
135.   }, []);
137.   useEffect(() => {
138.     return () => {
139.       stopSynthesis();
140.     };
141.   }, [stopSynthesis]);
143.   return { startSynthesis, stopSynthesis, status, error };
144. };
146. export default useTextToSpeech;

复制代码

每次通过startSynthesis调用文字转音频方法的时候，都先audioPlayerRef.current.unlockAudioContext();调用一下确保音频上下文可以在欣赏器环境中正常初始化（避免被静音计谋阻止）
代码还有很多逻辑可能处理的不好，也是第一次写分享，有问题的话可以一起讨论沟通一下啊

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