文本到语音合成API,纯JavaScript CodePen演示+源代码

作者 : IT 大叔 本文共10614个字,预计阅读时间需要27分钟 发布时间: 2020-09-22

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>What God is?</title>
  
</head>
<body>
<!-- partial:index.partial.html -->

<div class="sr_love">
  <h1>👋 Hello world,</h1>
  <h2>Today, let us learn about how good God is by 👂 listening to His word from the Berean Study Bible (used by permission). Press the "Play" button to test out this Text-To-Speech JavaScript demo I pieced together with CSS.</h2>
  <ol>
  <li>🎧 Listen to what the Bible says <b>God is</b>.</li>
  <li>Learn the 📍 location of each verse.</li>
  <li>Share <a target="_blank" href="https://smartcode.cash/godisGood/" title="The God is good web app.">this 🔗 link</a> with someone else to help people remember how good God is.</li>
  </ol>

<article>  
<p style="display:none;">Praise the LORD! Let us listen to a shortlist of descriptions used by the Berean Study Bible translators to describe God. Each bible verse location is listed after it's corresponding description. Let us get to know God better by hearing his word.

God is a consuming fire. Hebrews 12 verse 29 & Deuteronomy 4 verse 24. 
God is in heaven. Psalm 115 verse 3. 
God is my strong fortress. Second Samuel 22 verse 33. 
God is our fortress. Psalm 46 verse 7. 
God is in her citadels. Psalm 48 verse 3. 
God is a righteous judge. Psalm 7 verse 11. 
God is King of all the earth. Psalm 47 verse 7. 
God is my helper. Psalm 54 verse 4. 
God is the sustatiner of my soul. Psalm 54 verse 4. 
God is exalted in His power. Job 36 verse 22. 
God is Spirit. John 4 verse 24. 
God is wise in heart. Job 9 verse 4. 
God is mighty in strength. Job 9 verse 4. 
God is my King from ancient times. Psalm 74 verse 12. 
God is working salvation on the earth. Psalm 74 verse 12. 
God is a God of deliverance. Psalm 68 verse 20. 
God is our rescuer from Death. Psalm 68 verse 20. 
God is my witness. Philippians 1 verse 8. 
God is great. Job 36 verse 26. 
God is within her. Psalm 46 verse 5. 
God is our God forever and ever. Psalm 48 verse 14. 
God is mighty, but He despises no one. Job 36 verse 5. 
God is mighty in strength of understanding. Job 36 verse 5. 
God is flawless in word. Proverbs 30 verse 5. 
God is holy. Psalm 77 verse 13. 
God is faithful. Second Corinthians 1 verse 18. 
God is one. James 2 verse 19. 
God is not a God of disorder. First Corinthians 14 verse 33. 
God is full of compassion. Psalm 116 verse 5. 
God is truthful. John 3 verse 33. 
God is our refuge. Psalm 62 verse 8. 
God is my rock of refuge. Psalm 94 verse 22. 
God is not to be mocked. Galations 6 verse 7. 
God is the builder of everything. Hebrews 3 verse 4. 
God is greater than our hearts. First John 3 verse 20. 
God is omniscient. First John 3 verse 20. 
God is over all. Ephesians 4 verse 6. 
God is through all. Ephesians 4 verse 6. 
God is in all. Ephesians 4 verse 6. 
God is in the company of the righteous. Psalm 14 verse 5. 
God is surrounded by faithfulness. Psalm 89 verse 8. 
God is greatly feared. Psalm 89 verse 7. 
God is the strength of my heart. Psalm 73 verse 26. 
God is my portion forever. Psalm 73 verse 26. 
God is the Lord. Psalm 33 verse 12. 
God is the Rock. Psalm 18 verse 31 and Second Samuel 22 verse 32. 
God is my Rock. Second Samuel 22 verse 3. 
God is with you. First Samuel 10 verse 7 and First Chronicles 17 verse 2. 
God is with us. Psalm 46 verse 7. 
God is treating you as sons. Hebrews 12 verse 7. 
God is greater than all gods. Second Chronicles 2 verse 5. 
God is for us. Romans 8 verse 31. 
God is a sun. Psalm 84 verse 11. 
God is a shield. Psalm 84 verse 11. 
God is my salvation. Isaiah 12 verse 2. 
God is my strength. Isaiah 12 verse 2. 
God is my song. Isaiah 12 verse 2. 
God is not a man. Numbers 23 verse 19. 
God is not a son of man. Numbers 23 verse 19. 
God is greater than man. Job 33 verse 12. 
God is not unjust. Hebrews 6 verse 10.

</p>
</article>
  
  <div class=buttons>
  <button class="purple" id=play>Play</button><button id=stop>Stop</button>
</div>
  
<p class="srnotepriority">Please note: You may have to reload the URL the first time you visit this demo to get the page to play the audio. I have not yet 🤔 figured out why this occurs. 🤷‍♂️ Do you know? Fork 🍴 this demo and iterate it for everyone else to have a smoother experience if you get a chance.</p>
  
<p class="srnote"><i>Additionally, I apologize that there is no rewind button; however, feel free to click or press the <b>"Stop"</b> button and then click or press the <b>"Play"</b> button once more to restart the audio from the beginning anytime you like.</i></p>  

  <br>
  
<h2 class="followAlong">Read the Bible verses as you listen.</h2>
  <p class="srnote"><i>Please note: They are listed below in the order they are played by pressing the "Play" button above.</i></p>
<div>
<p class="verse">God is a consuming fire <span class="srverse">(Hebrews 12:29 & Deuteronomy 4:24)</span></p>
<p class="verse">God is in heaven <span class="srverse">(Psalm 115:3)</span></p>
<p class="verse">God is my strong fortress <span class="srverse">(2nd Samuel 22:33)</span></p>
<p class="verse">God is our fortress <span class="srverse">(Psalm 46:7)</span></p>
<p class="verse">God is in her citadels <span class="srverse">(Psalm 48:3)</span></p>
<p class="verse">God is a righteous judge <span class="srverse">(Psalm 7:11)</span></p>
<p class="verse">God is King of all the earth <span class="srverse">(Psalm 47:7)</span></p>
<p class="verse">God is my helper <span class="srverse">(Psalm 54:4)</span></p>
<p class="verse">God is the sustatiner of my soul <span class="srverse">(Psalm 54:4)</span></p>
<p class="verse">God is exalted in His power <span class="srverse">(Job 36:22)</span></p>
<p class="verse">God is Spirit <span class="srverse">(John 4:24)</span></p>
<p class="verse">God is wise in heart <span class="srverse">(Job 9:4)</span></p>
<p class="verse">God is mighty in strength <span class="srverse">(Job 9:4)</span></p>
<p class="verse">God is my King from ancient times <span class="srverse">(Psalm 74:12)</span></p>
<p class="verse">God is working salvation on the earth <span class="srverse">(Psalm 74:12)</span></p>
<p class="verse">God is a God of deliverance <span class="srverse">(Psalm 68:20)</span></p>
<p class="verse">God is our rescuer from Death <span class="srverse">(Psalm 68:20)</span></p>
<p class="verse">God is my witness <span class="srverse">(Philippians 1:8)</span></p>
<p class="verse">God is great <span class="srverse">(Job 36:26)</span></p>
<p class="verse">God is within her <span class="srverse">(Psalm 46:5)</span></p>
<p class="verse">God is our God forever and ever <span class="srverse">(Psalm 48:14)</span></p>
<p class="verse">God is mighty, but He despises no one <span class="srverse">(Job 36:5)</span></p>
<p class="verse">God is mighty in strength of understanding <span class="srverse">(Job 36:5)</span></p>
<p class="verse">God is flawless in word <span class="srverse">(Proverbs 30:5)</span></p>
<p class="verse">God is holy <span class="srverse">(Psalm 77:13)</span></p>
<p class="verse">God is faithful <span class="srverse">(2nd Corinthians 1:18)</span></p>
<p class="verse">God is one <span class="srverse">(James 2:19)</span></p>
<p class="verse">God is not a God of disorder <span class="srverse">(1st Corinthians 14:33)</span></p>
<p class="verse">God is full of compassion <span class="srverse">(Psalm 116:5)</span></p>
<p class="verse">God is truthful <span class="srverse">(John 3:33)</span></p>
<p class="verse">God is our refuge <span class="srverse">(Psalm 62:8)</span></p>
<p class="verse">God is my rock of refuge <span class="srverse">(Psalm 94:22)</span></p>
<p class="verse">God is not to be mocked <span class="srverse">(Galations 6:7)</span></p>
<p class="verse">God is the builder of everything <span class="srverse">(Hebrews 3:4)</span></p>
<p class="verse">God is greater than our hearts <span class="srverse">(1st John 3:20)</span></p>
<p class="verse">God is omniscient <span class="srverse">(1st John 3:20)</span></p>
<p class="verse">God is over all <span class="srverse">(Ephesians 4:6)</span></p>
<p class="verse">God is through all <span class="srverse">(Ephesians 4:6)</span></p>
<p class="verse">God is in all <span class="srverse">(Ephesians 4:6)</span></p>
<p class="verse">God is in the company of the righteous <span class="srverse">(Psalm 14:5)</span></p>
<p class="verse">God is surrounded by faithfulness <span class="srverse">(Psalm 89:8)</span></p>
<p class="verse">God is greatly feared <span class="srverse">(Psalm 89:7)</span></p>
<p class="verse">God is the strength of my heart <span class="srverse">(Psalm 73:26)</span></p>
<p class="verse">God is my portion forever <span class="srverse">(Psalm 73:26)</span></p>
<p class="verse">God is the Lord <span class="srverse">(Psalm 33:12)</span></p>
<p class="verse">God is the Rock <span class="srverse">(Psalm 18:31 and 2nd Samuel 22:32)</span></p>
<p class="verse">God is my Rock <span class="srverse">(2nd Samuel 22:3)</span></p>
<p class="verse">God is with you <span class="srverse">(1st Samuel 10:7 and 1st Chronicles 17:2)</span></p>
<p class="verse">God is with us <span class="srverse">(Psalm 46:7)</span></p>
<p class="verse">God is treating you as sons <span class="srverse">(Hebrews 12:7)</span></p>
<p class="verse">God is greater than all gods <span class="srverse">(2 Chronicles 2:5)</span></p>
<p class="verse">God is for us <span class="srverse">(Romans 8:31)</span></p>
<p class="verse">God is a sun <span class="srverse">(Psalm 84:11)</span></p>
<p class="verse">God is a shield <span class="srverse">(Psalm 84:11)</span></p>
<p class="verse">God is my salvation <span class="srverse">(Isaiah 12:2)</span></p>
<p class="verse">God is my strength <span class="srverse">(Isaiah 12:2)</span></p>
<p class="verse">God is my song <span class="srverse">(Isaiah 12:2)</span></p>
<p class="verse">God is not a man <span class="srverse">(Numbers 23:19)</span></p>
<p class="verse">God is not a son of man <span class="srverse">(Numbers 23:19)</span></p>
<p class="verse">God is greater than man <span class="srverse">(Job 33:12)</span></p>
<p class="verse">God is not unjust <span class="srverse">(Hebrews 6:10)</span></p></div>

<a class="smartlink" target="_blank" href="https://smartcode.cash/SmartBible/">🧠 SmartBible</a>

</div>

<style>
  body, p, li, h1, h2, button {
    background:black;
    line-height:36px;
    color: white;    
  }
  * {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */    
    margin:0 0 10px;
    outline:none;
    font-size:16px;
  }
.srverse{color:#0f9;}
.smartlink {
  background: #ffd700;
  color: #000;
  text-decoration: none;
  padding: 7px 17px;
  position: fixed;
  font-weight: bold;
  border-radius: 100px;
  bottom: 20px;
  right: 30px;
}
  h1 { 
    font-size:32px;
    line-height: normal;
    margin: 0px 0 20px;
  }
  .followAlong { font-size:24px; }
.srnote {
  color: #ffd70090;
  line-height:24px;
  padding: 10px;
  background: #ffd70010;
  border: 3px solid #ffd70020;
  border-radius: 7px;
}
  .srnotepriority {
color: #0f9;
  line-height:24px;
  padding: 10px;
  background: #00ff9910;
  border: 3px solid #00ff9950;
  border-radius: 7px;    
  }
.sr_love {
  padding:10px;
  max-width:777px;
  margin:20px auto;
  }
  a { color:#0f9; }
  .buttons {
    margin:20px 0 110px;
  }
button {
  width:100%;
  padding:14px;
  font-size:20px;
  max-width:40%;
  margin:0px 4%;
  float:left;
  background:#cc0000;
  color:white;
  border:none;
  font-weight:bold;
  border-radius:20px;
  cursor:pointer;
  }
.purple, .played {
  background: #0072ff;
  color: #fff;
}
  
</style>
<script async>
onload = function() {
  if ('speechSynthesis' in window) with(speechSynthesis) {

    var playEle = document.querySelector('#play');
    var stopEle = document.querySelector('#stop');
    var flag = false;

    playEle.addEventListener('click', onClickPlay);
    stopEle.addEventListener('click', onClickStop);
    
    function onClickPlay() {
      if (!flag) {
        flag = true;
        utterance = new SpeechSynthesisUtterance(document.querySelector('article').textContent);
        utterance.voice = getVoices()[1];
        utterance.pitch = 1.5;
        utterance.rate = 1;
        utterance.onend = function() {
          flag = false;
          stopEle.className = 'stopped';
        };
        playEle.className = 'played';
        stopEle.className = '';
        speak(utterance);
      }
    }

    function onClickStop() {
      if (speaking) { /* stop narration */
        /* for safari */
        stopEle.className = 'stopped';
        flag = false;
        cancel();
      }
    }

  }
}  
</script>
<!-- partial -->
  
</body>
</html>
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 文本到语音合成API,纯JavaScript CodePen演示+源代码

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论