Web Audio API Practice


by Jeremy Caudle
code

Today I'm trying to dabble with the Web Audio API. I've worked through the Basic concepts behind Web Audio API tutorial on MDN and I'm hoping this works. I couldn't properly test locally because of the cross-origin request for the audio file was blocked. I was able to get it working on this site though, and I think it'll be fun to work more with this API in the future!

This is a test of the HTML audio element.

View the code:

HTML and JS 
<section class="code-block">
            <audio id="audioPlayer" src="../ast/testaudio.mp3" controls>
            </audio>
            <div>
                <button id="btnPlayPause" data-playing="false" role="switch" aria-checked="false">Play</button>
                <button id="btnVolumeUp" onclick=""><span>Volume Up</span></button>
                <button id="btnVolumeDown" onclick=""><span>Volume Down</span></button>
            </div>
            <p>This is a test of the HTML audio element.</p>
        </section>
        <script>
            // Create an instance of the audio context.
            // First is for legacy browsers
            const AudioContext = window.AudioContext || window.webkitAudioContext;
            const audioContext = new AudioContext();
            // Variable for audio element
            const audioElement = document.querySelector('#audioPlayer');
            // Pass audio into audio context
            const track = audioContext.createMediaElementSource(audioElement);
            // Connect audio source to destination
            track.connect(audioContext.destination);
            // Variable for play/pause button
            const playPause = document.querySelector('#btnPlayPause');
            // Code for Play/Pause button click and ended event
            playPause.addEventListener('click', function () {

                // Check to see if context is in a suspended state
                if (audioContext.state === 'suspended') {
                    audioContext.resume();
                }

                // Change to Play or Pause depending on the state
                if (this.dataset.playing === 'false') {
                    audioElement.play();
                    this.textContent = 'Pause'
                    this.dataset.playing = 'true';
                } else if (this.dataset.playing === 'true') {
                    audioElement.pause();
                    this.textContent = 'Play';
                    this.dataset.playing = 'false';
                }
                
            }, false);
            // Check to see if the audio has ended
            audioElement.addEventListener('ended', () => {
                console.log('Audio finished.');
                playPause.dataset.playing = 'false';
                console.log(playPause.dataset.playing);
                playPause.textContent = 'Play';
                console.log(playPause.textContent);
                audioElement.style.backgroundColor = 'red';
            }, false);


            // Variables for volume up and down buttons
            const volumeUp = document.querySelector('#btnVolumeUp');
            const volumeDown = document.querySelector('#btnVolumeDown');
            volumeUp.addEventListener('click', function () {
                if (audioElement.volume < 1) {
                audioElement.volume += .01;
                }
            }, false);
            volumeDown.addEventListener('click', function () {
                if (audioElement.volume > 0.1) {
                audioElement.volume -= .1;
            }
            }, false);

        </script>
CSS 
html { box-sizing: border-box; z-index: 0; }
            html * { box-sizing: inherit; }
            section.code-block { 
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                z-index: 1;
                padding: 1rem;
                margin: 1rem auto;
            }

Tags