Home Playing Audio Files on Web Pages(English)
Post
Cancel

Playing Audio Files on Web Pages(English)

Text-to-Speech Conversion

ttsmaker s a free website for converting text to audio files. It features a simple and user-friendly interface, and supports multiple languages.

Desktop View

Desktop View

Integrating Audio Files with Web Pages

Desktop View

Simple HTML + JavaScript to Accomplish

1
2
3
4
5
6
7
<div class="container">
   	<audio id="audioPlayer" controls>
    	<source id="audioSource" src="unit_test_3/woman.mp3" type="audio/mpeg">
    	Your browser does not support the audio element.
    </audio>
</div>
<button type="button" class="btn btn-info" onclick="playAudio('audio/woman.mp3')">woman</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
function playAudio(filename) {
  var audioPlayer = document.getElementById('audioPlayer');
  var audioSource = document.getElementById('audioSource');

  // Update the path of the audio file
  audioSource.src = filename;

  // Reload the audio file
  audioPlayer.load();

  // Start playing
  audioPlayer.play();
}
</script>

Almost all modern browsers support

Desktop View

Ref: w3schools

Completion !!

Desktop View

☝ツ☝

This post is licensed under CC BY 4.0 by the author.

👈 ツ 👍