Adding a volume button with audio next to a word

Hello! 

I am looking to create a page on my website of add a volume icon button next to words so that people can hear the pronunciation of it. Is there some kind of code could I use to create that? See photo for an example of what I mean.

Edit page where you want to place this > Add a Code Block > Paste this code

<div class="audio-block">
  <div class="text">
    text
  </div>
  
  <img class="icon" src="https://cdn.icon-icons.com/icons2/916/PNG/512/Audio_icon-icons.com_71845.png" alt="Audio Icon" onclick="playAudio()"> 
  
<audio id="audio" style="display: none;">
  <source src="https://www.w3schools.com/tags/horse.ogg?gidzl=Y8XlJO_tQ6w8bsfAXUXiRuMGQqYVxsaydC1f6SxlEJ-ObpWUbEjkFSB1QKcKlMvecCHj6sKqJZCIZVDfR0" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
</div>
<style>
   .audio-block {
    display: flex;
    align-items: center;
    padding: 10px;
  }

.text {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #13538a;
    line-height: 1.4;
}

.icon {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

 .icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }
</style>
<script>
  function playAudio() {
    var audio = document.getElementById("audio");
    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
  }
</script>

If 2 text, audio, use this

<div class="audio-block">
  <div class="text">
    text 1
  </div>
  <span class="audio-icon" onclick="playAudio('audio1');"></span>
  <audio id="audio1" style="display: none;">
    <source src="https://www.w3schools.com/tags/horse.ogg?gidzl=pFSsEa5c1XNCw3CzIta26i3lDJ9GVW1AsRytOm5-K4dTw6PaMte7IuU-DpDRB0SUtRipOMM-e0GUGs875m" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</div>

<div class="audio-block">
  <div class="text">
    text 2
  </div>
  <span class="audio-icon" onclick="playAudio('audio2');"></span>
  <audio id="audio2" style="display: none;">
    <source src="https://tiengdong.com/wp-content/uploads/Tieng-dang-soan-tin-nhan-messenger-www_tiengdong_com.mp3?_=1" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
</div>
<style>
  .audio-block {
    display: flex;
    align-items: center;
    padding: 10px;
/*     border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    margin-bottom: 10px;
  }

  .audio-icon {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    cursor: pointer;
    background-image: url('https://cdn.icon-icons.com/icons2/916/PNG/512/Audio_icon-icons.com_71845.png');
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  .audio-icon:hover {
    transform: scale(1.1);
    opacity: 0.8;
  }

  .text {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #174688;
    line-height: 1.4;
  }
</style>
<script>
    function playAudio(audioId) {
    var audio = document.getElementById(audioId);
    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
  }
</script>