iT邦幫忙

3

詢問 自動播放JavaScript API 製作的語音朗讀器

jsp javascript jsp
qsxdfg2826 2022-12-27 01:50:33 ‧ 992 瀏覽

  • 分享至 

  • xImage

在網路上找到的語音朗讀器程式碼，想請問有沒有辦法一進入頁面就可以播放語音，把按按鈕這個步驟省略掉?自己嘗試了許多次但都會讓聲音直接消失，希望各位可以幫忙解答一下該如何修正，感激不盡。

<body>
  <div>
    <textarea id="text-input">王小明，111年12月22日，於XXX發生碰撞事故，劇烈碰撞導致意識不清昏迷，緊急聯絡人為王大明，電話0912345678，已通報附近警察局與醫院</textarea>
  </div> 
  <div>
    <button onclick=() id="synth-controller">Click to read</button>
    <a href="aboutus.jsp">離開此頁</a>

  </div>

  <script>
    const synth = window.speechSynthesis
    const utter = new SpeechSynthesisUtterance()
    const synthController = document.querySelector('#synth-controller')
    const voiceSelection = document.querySelector('#voice-selection')
    const rate = document.querySelector('#rate')
    const rateValue = document.querySelector('#rate-value')
    const pitch = document.querySelector('#pitch')
    const pitchValue = document.querySelector('#pitch-value')
    const volume = document.querySelector('#volume')
    const volumeValue = document.querySelector('#volume-value')
    let voices = []
  
    window.addEventListener('beforeunload', function (e) {
      e.preventDefault(); 
      stop()
    });
    synth.addEventListener('voiceschanged', setVoiceSelection)
    utter.addEventListener('end', setButtonToRead)

    synthController.addEventListener('click', speak)

    function speak() {
      utter.text = document.querySelector('#text-input').value
      synth.speak(utter)
      setButtonToStop()
    }

    function stop() {
      synth.cancel()
      setButtonToRead()
    }

    function setButtonToStop() {      
      synthController.textContent = 'Click to stop'
      synthController.removeEventListener('click', speak)
      synthController.addEventListener('click', stop)
    }

    function setButtonToRead() {      
      synthController.textContent = 'Click to read'
      synthController.removeEventListener('click', stop)
      synthController.addEventListener('click',  true, true, speak)
    }

    function setVoiceSelection() {
      voices = synth.getVoices()
      for (i = 0; i < voices.length; i++) {
        const option = document.createElement('option')
        option.textContent = voices[i].name
        voiceSelection.appendChild(option)
      }
    }

    function setUtterVoice() {
      for(let i = 0; i < voices.length; i++) {        
        if (voiceSelection.value === voices[i].name) {
          utter.voice = voices[i]
          return null
        }
      }
    }

    function setUtterRate() {
      rateValue.textContent = rate.value
      utter.rate = rate.value
    }

    function setUtterPitch() {
      pitchValue.textContent = pitch.value
      utter.pitch = pitch.value
    }

    function setUtterVolume() {
      volumeValue.textContent = volume.value
      utter.volume = volume.value
    }
  </script>
</body>
</html>
walis iT邦新手 5 級 ‧ 2022-12-27 11:08:44 檢舉
可能的原因是頁面還沒有完全載入，js 就已經執行完畢了。 試著使用 window.onload
https://www.geeksforgeeks.org/how-to-run-a-function-when-the-page-is-loaded-in-javascript/
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

3 個回答

2
akajoke
iT邦新手 5 級 ‧ 2022-12-27 12:20:39
最佳解答

很有趣的網頁。
你只要在最底下加入document.querySelector("#synth-controller").click()
就可以完成你的需求了

<body>
  <div>
  <textarea id="text-input" style="width: 480px; height: 531px;">王小明，111年12月22日，於XXX發生碰撞事故，劇烈碰撞導致意識不清昏迷，緊急聯絡人為王大明，電話0912345678，已通報附近警察局與醫院</textarea>
  </div> 
  <div>
    <button onclick=() id="synth-controller">Click to read</button>
    <a href="aboutus.jsp">離開此頁</a>

  </div>

  <script>

    const synth = window.speechSynthesis
    const utter = new SpeechSynthesisUtterance()
    const synthController = document.querySelector('#synth-controller')
    const voiceSelection = document.querySelector('#voice-selection')
    const rate = document.querySelector('#rate')
    const rateValue = document.querySelector('#rate-value')
    const pitch = document.querySelector('#pitch')
    const pitchValue = document.querySelector('#pitch-value')
    const volume = document.querySelector('#volume')
    const volumeValue = document.querySelector('#volume-value')
    let voices = []
  
    window.addEventListener('beforeunload', function (e) {
      e.preventDefault(); 
      stop()
    });
    synth.addEventListener('voiceschanged', setVoiceSelection)
    utter.addEventListener('end', setButtonToRead)

    synthController.addEventListener('click', speak)

    function speak() {
      utter.text = document.querySelector('#text-input').value
      synth.speak(utter)
      setButtonToStop()
    }

    function stop() {
      synth.cancel()
      setButtonToRead()
    }

    function setButtonToStop() {      
      synthController.textContent = 'Click to stop'
      synthController.removeEventListener('click', speak)
      synthController.addEventListener('click', stop)
    }

    function setButtonToRead() {      
      synthController.textContent = 'Click to read'
      synthController.removeEventListener('click', stop)
      synthController.addEventListener('click',  true, true, speak)
    }

    function setVoiceSelection() {
      voices = synth.getVoices()
      for (i = 0; i < voices.length; i++) {
        const option = document.createElement('option')
        option.textContent = voices[i].name
        voiceSelection.appendChild(option)
      }
    }

    function setUtterVoice() {
      for(let i = 0; i < voices.length; i++) {        
        if (voiceSelection.value === voices[i].name) {
          utter.voice = voices[i]
          return null
        }
      }
    }

    function setUtterRate() {
      rateValue.textContent = rate.value
      utter.rate = rate.value
    }

    function setUtterPitch() {
      pitchValue.textContent = pitch.value
      utter.pitch = pitch.value
    }

    function setUtterVolume() {
      volumeValue.textContent = volume.value
      utter.volume = volume.value
    }
    
      document.querySelector("#synth-controller").click()

  </script>
</body>
</html>

甚至也可以把按鈕隱藏起來

    document.querySelector("#synth-controller").style.display="none"

以上，希望有幫助到你哦～～～～～

看更多先前的回應...收起先前的回應...
qsxdfg2826 iT邦新手 5 級 ‧ 2022-12-27 13:47:27 檢舉

謝謝你的回答，雖然我這邊看到按鈕變成有按下去的樣子，但是卻沒有聲音QQ
https://ithelp.ithome.com.tw/upload/images/20221227/20155145eDGZgGiRCN.png

akajoke iT邦新手 5 級 ‧ 2022-12-27 21:35:31 檢舉

我去w3h那邊丟你的html測試是OK的
應該是你的IDE有偵錯 所以不讓你繼續執行下去吧
因為你刪了一些DOM 所以會有錯誤

大概是
Cannot set properties of null (setting 'textContent')

你可以去
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
測試看看是有效果的

qsxdfg2826 iT邦新手 5 級 ‧ 2022-12-28 01:11:35 檢舉

謝謝你的回答~~我去w3h測試也是有效，後來發現是丟在chrome沒有把音效允許的選項打開，現在OK了，感謝你拯救我的期末/images/emoticon/emoticon51.gif

huada1819 iT邦新手 5 級 ‧ 2022-12-29 22:13:06 檢舉

哈哈哈笑死 我看文章就有在猜原PO音響壞掉之類ㄉ哈哈哈

登入發表回應
2
re.Zero
iT邦研究生 5 級 ‧ 2022-12-27 21:21:15

Update:
我還想說為何樓上玩得這麼嗨(?)～我這邊卻看不到自動播放效果，才發現 Chrome Console 右上角的黃色驚嘆號：
Deprecated Feature Used : speechSynthesis.speak() without user activation is deprecated and will be removed.
Feature: Remove SpeechSynthesis.speak without user activation
好喔～ Google～ 真是隨心所欲～

Old:
就我看來，你砍掉一些 HTML 內該有的 Input 元件，導致 JavaScript 無法取得所需要的資料而無法執行。
在你知道你在做啥之前，你還是把元件放回去吧……

登入發表回應
1
vsyour
iT邦新手 5 級 ‧ 2022-12-28 10:21:24

您可以尝试在页面加载完成后立即调用speak()函数来实现播放语音的功能，例如：

window.onload = function() {
  speak();
}

或者可以在页面加载完成时使用window.speechSynthesis.speak()函数直接播放语音，例如：

window.onload = function() {
  window.speechSynthesis.speak(utter);
}

请注意，使用这种方法时，您可能需要在页面加载前初始化utterance对象，以便它能够正确播放语音。

此外，如果您想在页面加载完成后立即播放语音，还可以尝试使用window.speechSynthesis.speak()函数，例如：

window.speechSynthesis.speak(utter);

希望以上信息能够帮助您解决问题。如果您有进一步的问题，请随时告诉我们。

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙