https://www.rgblink.com/npublic/commonjs/nouglify/audioPlay/ttsPlay.js

1(function (root, factory) {
2	if (typeof define === 'function' && define.amd) {
3		define([], factory);
4	} else if (typeof module === 'object' && module.exports) {
5		module.exports = factory();
6	} else {
7		root.ttsPlay = factory();
8	}
9})(this, function () {
10	'use strict';
11	class ttsPlay {
12        constructor(option){
13            this.option = $.extend({
14                element:"",
15            }, option);
16            this.element = $(this.option.element)
17            if(this.element.length==0){
18                return
19            }
20            this.textList = []
21            this.cText = []
22            this.player = null
23            this.nowId = ""
24            this.ttsAudio = null
25            this.token = ""
26            this.env = this.getBrowserEnv()
27            if(this.env.isAndroidWeixin){
28                $require(['/npublic/commonjs/nouglify/audioPlay/webPlayer.js'],()=>{
29                    this.sourcePlayer = new webPlayer();
30                    this.init()
31                })
32            }else{
33                $require(['css!/npublic/commonjs/nouglify/plyr/plyr.css','/npublic/commonjs/nouglify/plyr/plyr.js'],()=>{
34                    this.init()
35                })
36            }
37        }
38        getBrowserEnv() {
39            const ua = navigator.userAgent.toLowerCase();
40            return {
41                isWeixin: /micromessenger/.test(ua),
42                isAndroid: /android/.test(ua),
43                isIOS: /(iphone|ipad|ipod|ios)/.test(ua),
44                isX5: /tbs/.test(ua) || /mqqbrowser/.test(ua),
45                isAndroidWeixin: /micromessenger/.test(ua) && /android/.test(ua)
46            };
47        }
48        //初始化遍历所有p和div，添加播放按钮
49        init(){
50            this.element.children('*').each((i,e)=>{
51                let text = e.innerText.trim()
52                let tItm = $(e)
53                if(text){
54                    this.textList.push({
55                        id:'readBtn'+i,
56                        text:text,
57                    })
58                    tItm.prepend(`<a href="javascript:;" class="ttsRead" id="readBtn${i}"><svg t="1710380018673" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="https://www.w3.org/2000/svg" p-id="10306" width="200" height="200"><path d="M527.616 121.7024L289.9456 274.3296H171.3664a118.784 118.784 0 0 0-119.296 118.8352v238.08a118.5792 118.5792 0 0 0 119.296 118.784h118.5792l237.6704 152.5248c33.5872 14.592 59.5968-1.024 59.5968-34.048V155.7504c0-32.8704-26.6752-48.2304-59.5968-34.048z m200.2432 191.8464a29.7472 29.7472 0 1 0-43.4176 40.6016 173.1584 173.1584 0 0 1 24.7296 38.912 267.0592 267.0592 0 0 1 26.7264 118.9376 266.8032 266.8032 0 0 1-26.7264 119.0912 174.08 174.08 0 0 1-24.7296 38.9632 29.7472 29.7472 0 1 0 43.4688 40.6016 225.28 225.28 0 0 0 34.6624-53.3504 326.3488 326.3488 0 0 0 32.768-145.408 326.2976 326.2976 0 0 0-32.768-145.3568 226.9184 226.9184 0 0 0-34.7136-53.1968z m182.3232-36.8128c-24.0128-40.704-48.2816-68.864-65.3824-84.0192a29.7472 29.7472 0 0 0-39.5776 44.3904 192.1536 192.1536 0 0 1 15.872 16.7936 363.0592 363.0592 0 0 1 37.888 53.2992 398.6944 398.6944 0 0 1 55.296 204.8 398.6944 398.6944 0 0 1-55.3472 205.312 372.736 372.736 0 0 1-37.7856 53.0432 196.9152 196.9152 0 0 1-15.872 16.7424 29.7472 29.7472 0 0 0 39.5264 44.4416c17.0496-15.36 41.2672-43.3152 65.3312-84.0192a458.24 458.24 0 0 0 63.5392-235.52 456.9088 456.9088 0 0 0-63.488-235.52z" p-id="10307"></path></svg><span></span></a>`)
59                }
60            })
61            console.log(this.textList)
62            this.renderClick()
63        }
64        // 注册播放按钮点击事件
65        renderClick(){
66            this.element.on("click",".ttsRead",(e)=>{
67                let btn = $(e.currentTarget)
68                let id = btn.attr("id")
69                let text = this.textList.find(n=>n.id==id).text
70                if(text){
71                    if(id == this.nowId){
72                        if(btn.hasClass('isPaused')){
73                            this.audioPlay()
74                            btn.removeClass('isPaused')
75                        }else{
76                            this.audioStop()
77                            btn.addClass('isPaused')
78                        }
79                        return
80                    }
81                    this.nowId = id
82                    this.element.find(".plyr").remove()
83                    this.element.find(".ttsAudio").remove()
84                    this.element.find(".ttsRead").removeClass('isPaused')
85                    $require(['cmsAjax',"/npublic/commonjs/jsencrypt.js","/npublic/commonjs/nouglify/jquery.md5.js"],(c,rsa,a)=>{
86                        let url = "/fwebapi/visitor/lowcode/audio/getAudioToken"
87                        let p = $.nrsa(`designVue&${$.md5(navigator.userAgent)}

87`,'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCdBbSMUKBY3wW8C/RFFwFoTHyO8xM67xBtgERb/4z6dqUq2ZeTagHUT6tbnuvhug0FNU9t/bzBc6KOivkzPToYYJG/RDzvdAJTjdvvvu3WQUpKOa0s0V3ehkKRoZPIFw3YnahtUrIe9es0V0LlTkOyFlH2M6rpceC7K0XgEs7lZwIDAQAB')
88                        c.cmsAjax.get(url,{},{headers:{authCode:p}}).then((res)=>{
89                            if(res && res.data && res.data.token){
90                                this.token = res.data.token
91                                this.renderText(text)
92                            }
93                        })
94                    })
95                }
96            })
97        }
98        // 解析文本，分隔成数组
99        renderText(text){
100            let tArr = []
101            if(text.length>60){
102                tArr = text.split(/[。:；\n]/)
103            }else{
104                tArr.push(text)
105            }
106            tArr = tArr.filter(item => item.trim()!== '').map(item => item.trim());
107            this.cText = tArr
108            console.log(this.cText)
109            this.cText.forEach(e=>{
110                console.log(e.length,e)
111            })
112            if(this.env.isAndroidWeixin){
113                let audioList = []
114                this.cText.forEach(e=>{
115                    let url = this.getAudio(e)
116                    audioList.push(url)
117                })
118                this.sourcePlayer.stop();
119                this.sourcePlayer.setPlaylist(audioList);
120                this.sourcePlayer.onTrackEnd = (trackUrl) => {
121                    // console.log(`已完成播放: ${trackUrl}`);
122                };
123                this.sourcePlayer.onPlaylistEnd = () => {
124                    console.log('播放列表全部播放完毕');
125                    this.nowId = ""
126                };
127                this.sourcePlayer.startPlaylist();
128                return
129            }else{
130                this.processQueue(true)
131            }
132        }
133        // 队列渲染
134        processQueue(k){
135            if(this.cText.length==0){
136                console.log('队列完成')
137                this.playFirst()
138                this.nowId = ""
139                return
140            }
141            let item = this.cText.shift()
142            let item2 = null
143            if(k){
144                item2 = this.cText.shift()
145            }
146            this.read(item,item2).then(()=>{
147                this.processQueue()
148            })
149        }
150        // 异步插入音频，并控制播放
151        read(text,text2){
152            return new Promise((resolve, reject) => {
153                this.appendAudio(text)
154                if(text2){
155                    this.appendAudio(text2)
156                }
157                this.playFirst(resolve)
158            });
159        }
160        playFirst(resolve){
161            this.ttsAudio = this.element.find('.ttsAudio')[0];
162            if (this.ttsAudio) {

163                let id = this.ttsAudio.id
164                this.ttsAudio.play();
165                this.ttsAudio.addEventListener('ended',()=>{
166                    $(this.ttsAudio).parent(".plyr").remove();
167                    $(this.ttsAudio).remove();
168                    if(resolve){
169                        resolve()
170                    }
171                });
172                $("#"+ id).parent(".plyr").show()
173            }
174        }
175        // 插入音频
176        appendAudio(text){
177            let url = this.getAudio(text)
178            const audio = document.createElement('audio');
179            // audio.src = url; 
180            audio.className = 'ttsAudio';
181            let id = 'ttsAudio'+ +new Date();
182            audio.id = id;
183            audio.preload = 'auto';
184            this.element.append(audio)
185            const player = new Plyr('#'+ id, {});
186            $("#"+ id).parent(".plyr").hide()
187            audio.src = url; 
188        }
189        // 获取音频地址
190        getAudio(text){
191            let data = {
192                token:this.token,
193                tex:encodeURIComponent(encodeURIComponent(text)),
194                lan:'zh',
195                cuid:'ypsm',
196                ctp:1,
197                spd:8
198            }
199            let arr = []
200            for(let i in data){
201                arr.push(`${i}=${data[i]}`)
202            }
203            let url = `/fwebapi/visitor/lowcode/audio/getAudioData?${arr.join('&')}`
204            return url
205        }
206        // 播放音频
207        audioPlay(url){
208            this.ttsAudio.play();
209        }
210        // 暂停音频
211        audioStop(){
212            this.ttsAudio.pause()
213        }
214    }
215  	return ttsPlay;
216});