100多年前的地攤

寒冬殘荷

195400 發表于 2021-10-15 15:07
代碼基本是原來的就加了幾句與文字轉語音相關的語句

怪了，您的那個文字轉語音相關的語句，我用放在html代碼調試器中運行可以，放到這里不行。

195400

紅楓 發表于 2021-10-15 15:22
我的意思是不用協調，不啟動有音樂就行，只是音量小些，突出文字朗讀罷了。僅是提議而己！

哦，那要找個舒緩的背景音樂，不過兩個聲音是不是同時都響就難說了。

195400

寒冬殘荷 發表于 2021-10-15 15:23
怪了，您的那個文字轉語音相關的語句，我用放在html代碼調試器中運行可以，放到這里不行。

是不是差了點擊的那一下？

寒冬殘荷

195400 發表于 2021-10-15 15:46
是不是差了點擊的那一下？

<div style="position:relative; width:900px;height:auto;text-align:justify;line-height:60px;font-size:30px;color:#f00;letter-spacing:2px;overflow: hidden;border:2px #FF0 solid;margin:0px auto;border-radius:16px;padding:20px; " >　　
        這是在網頁上通過JS實現文本的語音朗讀，即語音合成。語音合成也被稱為文本轉換技術（TTS），它是將計算機自己產生的、或外部輸入的文字信息轉變為可以聽得懂的、流利的口語輸出的技術。
<audio controls loop autoplay src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=6&text=這是在網頁上通過JS實現文本的語音朗讀，即語音合成。語音合成也被稱為文本轉換技術（TTS），它是將計算機自己產生的、或外部輸入的文字信息轉變為可以聽得懂的、流利的口語輸出的技術。">
</audio>
</div>

寒冬殘荷

上面的代碼在html調試器里正常讀出，語速取6時，語音文件長度17秒，取5時20秒。在這里有聲音，但不正常，語音文件長度1秒。（原來不直接放語音接口在這里就可以朗讀正常。樓主的正常，應該是所有圖片是使用這里上傳的。2021.10.20補記。）

195400

寒冬殘荷 發表于 2021-10-15 16:41
上面的代碼在html調試器里正常讀出，語速取6時，語音文件長度17秒，取5時20秒。在這里有聲音，但不正常，語 ...

不能依賴lautoplay能自動播放，好些瀏覽器禁止了自動播放，也許某些網站也禁止了這功能，禁止是為了安全的考慮。
例如，我測試這段代碼時就沒自動開始播放（chrome）。

195400

寒冬殘荷 發表于 2021-10-15 16:41
上面的代碼在html調試器里正常讀出，語速取6時，語音文件長度17秒，取5時20秒。在這里有聲音，但不正常，語 ...

1. <div id="showTxt" style="color:red;font:bold 2em 微軟雅黑;"></div>
   
2. <input type="button" value="click to play" id='mp'>
   
3. <script type="text/javascript">
   
4. var picDesc = [
   
5. "吃，乃人生存之根本。所以，食品攤永遠不愁沒生意！",
   
6. "熱氣騰騰的燒餅攤。燒瓶小哥滿臉疑惑，似乎在問：要不要來一個？",
   
7. "茶飲攤。喝茶就喝茶，可千萬別惹攤主，看這模樣，功夫一定了得！",
   
8. "冰糖葫蘆攤。如此特色的傳統小吃，讓人垂涎三尺。",
   
9. "白酒攤。大爺：口饞不？來一杯解解饞？",
   
10. "粽子攤。顧客吃得津津有味，老板滿臉欣慰。",
    
11. "宵夜攤。寒冷的冬夜，必須來一碗熱湯暖暖身子。",
    
12. "攤主這呦呵勁，可高興了！不過這地攤設備罕見，到底是買啥的呢？",
    
13. "粉絲攤。堆積如山的貨量，不用愁沒貨！",
    
14. "魚干攤。邊晾曬邊買賣，制作與賺錢互不相誤。",
    
15. "糖果攤。吸引了那么多小朋友，攤主是妥妥的孩子王！",
    
16. "賣棗攤。攤主細心周到，份量都已經給您分好啦！",
    
17. "竹、草編器具攤。堆疊的這么高，非常引人注目！",
    
18. "理發攤。設備十足，理發師也非常有架勢！",
    
19. "修腳攤。原來腳部按摩服務早就有了！",
    
20. "補鞋攤。攤主精心修補，生意穩賺不賠！",
    
21. "拔牙攤。直接硬拔，隔著屏幕都能感受到一絲痛意！",
    
22. "葫蘆攤。一個藤上七個瓜，各具特色的小葫蘆，任君挑選！",
    
23. "貼紙攤。出售各種手工剪紙，精美又有趣！",
    
24. "小玩具攤。攤主：你要啥樣的？我可以立馬編做！",
    
25. "花生攤。剛煮的花生，口感好極了！",
    
26. "水果攤。讓人難以想象，這攤子竟然是擺在一百年前的天安門前！",
    
27. "盂類器具攤。缺痰盂、夜壺不？質量杠杠的，可以放心購買！",
    
28. "古玩攤。各種陶瓷、首飾應有盡有，攤主還是個小可愛！",
    
29. "掛飾攤。琳瑯滿目的小吊墜，非常吸引人！",
    
30. "服裝攤。稍顯凌亂，可能是只試不買的人太多了。",
    
31. "雜貨攤。你想要的，這里都有，保證滿足你的需求！",
    
32. "日常用品攤。鍋碗瓢盆、拖把、水桶...走過路過別錯過！",
    
33. "賣鞋攤�？钍健⒊叽a齊全，還可現場訂做。",
    
34. "涼席攤。尺寸驚人，一百年前的床原來那么大！",
    
35. "賣布攤。漂白布、染色布、色織布...種類齊全。",
    
36. "貼身用品攤。耳罩、腰帶、錢袋...一人、一竹竿就是一攤位",
    
37. "磨刀攤。人群密集，看來古人的“磨刀不誤砍柴工”誠不欺我！",
    
38. "小玩意雜貨攤。商品分類展列，可按需求選購。"];
    
39. var tIdx = 0;
    
40. var ttsText;
    
41. var showTxt = document.querySelector('#showTxt');
    
42. var ttsAudio = document.createElement('audio');
    
43.         ttsAudio.setAttribute('id', "tts_autio_id");
    
44.         ttsAudio.setAttribute("autoplay",true);
    
45.         ttsAudio.setAttribute('type', 'audio/mpeg');
    
46. 
    
47. function doTTS(){
    
48.          
    
49.         ttsText = picDesc[tIdx];
    
50.         showTxt.innerHTML = picDesc[tIdx];
    
51.         ttsAudio.setAttribute('src', 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text='+ttsText);
    
52.     ttsAudio.play();
    
53.         tIdx++; tIdx %= picDesc.length;
    
54.         setTimeout(doTTS, 10000);
    
55. }
    
56. document.querySelector('#mp').onclick = function()        {
    
57. this.style.display = 'none';
    
58. doTTS();
    
59. }
    
60. </script>
    

復制代碼

紅楓

很成功，很完美，贊一個！
為你喝彩！

雄鷹翱翔

老師您好：前兩天有事晚來了，欣賞您的佳作，贊一個！

195400

雄鷹翱翔 發表于 2021-10-16 08:12
老師您好：前兩天有事晚來了，欣賞您的佳作，贊一個！