Click on the text and play the sound - any solution?

Question

Dear Stackoverflow community,

I have these sentences on an HTML below. Each sentence has its voice clip in MP3. I want to find the simplest javaScript code for playing the voice clip. How I need to continue the script in order to play the second sentence from the audio/audio_02.mp3? Thanks in advance from Hungary.

<!DOCTYPE html>
<html lang="en">
<head>
<title>ENGLISH HOMONYMS</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<script type="text/javascript">
function play() {
var audio = new Audio('audio/audio_01.mp3');
audio.play();
}
</script>

<h2>ENGLISH HOMONYMS</h2>

<p onclick= "play();">The bandage was wound around the wound.</p>
<p onclick= "play();">farm was used to produce produce.</p>

</body>
</html>

StackOverflow is not a "we'll do your work for you for free" site. Show your effort, instead of asking for a ready solution. Show specific errors you need help with and example output that you expect. — Ron, Mar 19 '22 at 13:24
Yes, dear Ron, you may be right, I know, but, please, consider the fact too that I am a beginner in JS and what's more I suffer the disease cerebral palsy that makes me hard to write and test codes (I am lying on my bed and I can use only one hand on the keyboard). Thanks for understanding. Your sincerely Csaba from Hungary — Csaba Sárhegyi, Mar 19 '22 at 16:40
Seems you have found the excuse.. If you are perusing coding, and you wan to advance, and not be a beginner, you do it... no excuses. We do not need to know your diseases here. We need to follow guidelines which help YOU advance, and others reading these solutions advance. I wish you the best. — Ron, Mar 19 '22 at 20:25
Thank you for your understanding. You seem to be right but things are sometimes hard. — Csaba Sárhegyi, Mar 19 '22 at 20:48

dinesh oz · Answer 1 · 2022-03-19T13:21:38.370

Even Better Solution:

  let words = document.querySelector('.words');

words.innerHTML = words.innerText.split(' ').map(word => `<span onClick="speak('${word}')" >${word}</span>`).join(' ');

function speak(mes){
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; 
msg.volume = 1; // From 0 to 1
msg.rate = 1; // From 0.1 to 10
msg.pitch = 2; // From 0 to 2
msg.text = mes;
msg.lang = 'en';
speechSynthesis.speak(msg);
}

<p class="words">The bandage was wound around the wound.</p>

Better solution :

function speak(mes){
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; 
msg.volume = 1; // From 0 to 1
msg.rate = 1; // From 0.1 to 10
msg.pitch = 2; // From 0 to 2
msg.text = mes;
msg.lang = 'en';
speechSynthesis.speak(msg);
}

<h1 onClick="speak('hi')" >
  hi
</h1>

<h2 onClick="speak('How are you')" >
  How are you
</h2>

Itamar Cohen · Answer 2 · 2022-03-20T12:47:06.487

As written in this question:

var audio = new Audio('audio_file.mp3');
audio.play();

function play() {
  var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/descent/spring.mp3');
  audio.play();
}

<p onclick="play()">...</p>

Or if you want some animation to it:

function play() {
  var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/descent/spring.mp3');
  audio.play();
}

.play-music:hover {
background-color: black;
color: white;

}

<p class="play-music" onclick="play()">...</p>

As regular HTML and not separated for the non animated one:

    <html>
       <body>
       <script>
        function play() {
          var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/descent/spring.mp3');
          audio.play();
        }
        </script>


        <p onclick="play()">...</p>
        </style>
      </body>
    </html>

As regular HTML and not separated for the animated one:

<html>
   <body>
   <script>
    function play() {
      var audio = new Audio('http://codeskulptor-demos.commondatastorage.googleapis.com/descent/spring.mp3');
      audio.play();
    }
    </script>


    <p class="play-music" onclick="play()">...</p>
    <style>
      .play-music:hover {
        background-color: black;
       color: white;
       }
    </style>
  </body>
</html>

Hope you'll find it useful.

Dear Itamar, Your help was very useful for me but please help me still a little. The first sentence is ok with the code but I don't know how to go on with the next one. Thanks for your help in advance. I wanted to put my whole HTML code here but I was not able to do in the right format because it became to plain text. — Csaba Sárhegyi, Mar 19 '22 at 21:47
If the edits I made helped you, I would love an accept mark to help other people. — Itamar Cohen, Mar 20 '22 at 12:48

Click on the text and play the sound - any solution?

2 Answers2