Play audio files in JavaScript

We can <audio>add audio files to the page using the tag. This is the simplest way to play audio files without involving JavaScript. <audio>The tag's srcattribute specifies the address of the audio file. It also has other useful properties, such as 控制, 自动播放and 循环. But sometimes, we want to control and play sounds automatically, like in games, on click or any other event. In this case, we want JavaScript to control and play the file based on our logic.

.play()[ Play audio files using JavaScript ]

We simply create an audio object instance to load the audio file using JavaScript, i.e. using new Audio(). After loading the audio file, we can .play()play it using the function.

const music = new Audio('adf.wav');
music.play();
music.loop =true;
music.playbackRate = 2;
music.pause();qqazszdgfbgtyj

In the code above, we load an audio file and simply play it. JavaScript gives us a lot of flexibility and a lot of functionality. We can control playback rate, loop audio, pause and play sounds. The only problem is that with multiple sounds at once, the control capabilities are limited compared to the latest technology.

[Play audio files using Web Audio API]

Although it's a bit cumbersome to set up, the Web Audio API gives us a lot of flexibility and control over our sound. It is a significant improvement over typical HTML5 audio and allows for sophisticated audio processing. It uses HTML5 audio to represent audio elements as nodes on a directed graph structure called an audio context. Many types of nodes can be connected between audio sources and destinations, such as volume nodes, which can help us manipulate the volume.

<audio src='audio_file.mp3'></audio>
const audioContext = new AudioContext();
const element = document.querySelector(audio);
const source = audioContext.createMediaElementSource(element);
source.connect(audioContext.destination)
audio.play();

Here we first initialize the audio context and get a reference to the audio file source. We then connect that source to the global destination and complete the audio setup.

[ howler.jsPlay audio files with JavaScript using the library]

howler.jsis an audio processing library. It allows us to take advantage of the power of the Web Audio API and the simplicity of HTML 5 Audio. It is widely used in react-like components to handle browser-based audio, especially when playing multiple audio sources. It can use the Howler object to control the global audio context, and then use the Howl to control the audio or a group of audios.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      
      
      src: ['https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'],
      volume: 1.0,
      onend: function () {
      
      
        alert('We finished with the setup!');
      }
    });
    sound.play()
</script>

All major browsers except Internet Explorer support all these methods. Internet Explorer does not support the Web Audio API and howler.js.