How to make multiple html elements use the same Javascript without copying code and changing variabl-CodePudding

I apologize if the title isn't clear, I created a simple audio player with html and java, is there a way to put multiple of these on my website without the need to rewrite all the variables, IDs and stuff?

I think I'd need to use classes, but I don't really have much knowledge about OOP, so any help is appreciated.

Here's my html:

<body>
    <div id="wrapper">
        <fieldset>
            <legend>Song</legend>
            <div id='player'>
                <audio id="music_player" preload="metadata" loop>
                    <source src="music\song.mp3">
                </audio>
                <input type="image" src="images/playButton.png" onclick="play_aud()" id="play_button">
                <input type="image" src="images/pauseButton.png" onclick="pause_aud()" id="play_button">
                <input type="image" src="images/stopButton.png" onclick="stop_aud()" id="play_button">
                <span id="current-time" class="time">0:00</span>
                <input type="range" id="seek-slider" max="100" value="0">
                <span id="duration" class="time">0:00</span>
                <input type="image" src="images/volumeButton.png" id="vol_img" onclick="mute()">
                <input type="range" id="change_vol" onchange="change_vol()" step="0.05" min="0" max="1" value="1">
            </div>
        </fieldset>
    </div>
</body>
<script src="script.js"></script>

And Javascript:


let muteState = 'unmute';

var player;

const audioButton = document.getElementById('vol-img');
const currentTimeContainer = document.getElementById('current-time');
const audio = document.querySelector('audio');
const durationContainer = document.getElementById('duration');
const seekSlider = document.getElementById('seek-slider')
const calculateTime = (secs) => {
    const minutes = Math.floor(secs / 60);
    const seconds = Math.floor(secs % 60);
    const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
    return `${minutes}:${returnedSeconds}`;
}
const displayDuration = () => {
    durationContainer.textContent = calculateTime(audio.duration);
}
const setSliderMax = () => {
    seekSlider.max = Math.floor(audio.duration);
}
const displayBufferedAmount = () => {
    const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1));
    audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
}

function startplayer() 
{
 player = document.getElementById('music_player');
 player.controls = false;
}
function play_aud() 
{
 player.play();
} 
function pause_aud() 
{
 player.pause();
}
function stop_aud() 
{
 player.pause();
 player.currentTime = 0;
}
function change_vol()
{
 player.volume=document.getElementById("change_vol").value;
}
function mute()
{
    if(muteState == 'mute')
    {
        document.getElementById('vol_img').src = 'images/volumeButton.png';
        muteState = 'unmute';
        audio.muted = false;
    }
    else
    {
        document.getElementById('vol_img').src = 'images/volumeButtonmute.png';
        muteState = 'mute'
        audio.muted = true;
    }
};

if (audio.readyState > 0) {
    displayDuration();
    setSliderMax();
    displayBufferedAmount();
} else {
    audio.addEventListener('loadedmetadata', () => {
        displayDuration();
        setSliderMax();
        displayBufferedAmount();
    });
}

audio.addEventListener('progress', displayBufferedAmount);

seekSlider.addEventListener('input', () => {
  currentTimeContainer.textContent = calculateTime(seekSlider.value);
});

seekSlider.addEventListener('change', () => {
    audio.currentTime = seekSlider.value;
});
audio.addEventListener('timeupdate', () => {
    seekSlider.value = Math.floor(audio.currentTime);
    currentTimeContainer.textContent = calculateTime(audio.currentTime);
});

CodePudding user response：

i have converted all code to class based so now you can create as many instances as you want

i have changed all getElementById to querySelector since its more suitable for this situation

class audio_player{
    constructor(root){
        this.html = `
            <div id="wrapper">
                <fieldset>
                    <legend>Song</legend>
                    <div id='player'>
                        <audio id="music_player" preload="metadata" loop>
                            <source src="music\song.mp3">
                        </audio>
                        <input type="image" src="images/playButton.png" onclick="play_aud()" id="play_button">
                        <input type="image" src="images/pauseButton.png" onclick="pause_aud()" id="play_button">
                        <input type="image" src="images/stopButton.png" onclick="stop_aud()" id="play_button">
                        <span id="current-time" >0:00</span>
                        <input type="range" id="seek-slider" max="100" value="0">
                        <span id="duration" >0:00</span>
                        <input type="image" src="images/volumeButton.png" id="vol_img" onclick="mute()">
                        <input type="range" id="change_vol" onchange="change_vol()" step="0.05" min="0" max="1" value="1">
                    </div>
                </fieldset>
            </div>    
        `
        root.innerHTML = this.html
        this.html = root
        this.interactivity()
    }

    interactivity(){
        let muteState = 'unmute';
        var player;

        const audioButton = this.html.querySelector('#vol-img');
        const currentTimeContainer = this.html.querySelector('#current-time');
        const audio = this.html.querySelector('audio');
        const durationContainer = this.html.querySelector('#duration');
        const seekSlider = this.html.querySelector('#seek-slider')
        const calculateTime = (secs) => {
            const minutes = Math.floor(secs / 60);
            const seconds = Math.floor(secs % 60);
            const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
            return `${minutes}:${returnedSeconds}`;
        }
        const displayDuration = () => {
            durationContainer.textContent = calculateTime(audio.duration);
        }
        const setSliderMax = () => {
            seekSlider.max = Math.floor(audio.duration);
        }
        const displayBufferedAmount = () => {
            const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1));
            audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
        }

        function startplayer() 
        {
        player = this.html.querySelector('#music_player');
        player.controls = false;
        }
        function play_aud() 
        {
        player.play();
        } 
        function pause_aud() 
        {
        player.pause();
        }
        function stop_aud() 
        {
        player.pause();
        player.currentTime = 0;
        }
        function change_vol()
        {
        player.volume=this.html.querySelector("#change_vol").value;
        }
        function mute()
        {
            if(muteState == 'mute')
            {
                this.html.querySelector('#vol_img').src = 'images/volumeButton.png';
                muteState = 'unmute';
                audio.muted = false;
            }
            else
            {
                this.html.querySelector('#vol_img').src = 'images/volumeButtonmute.png';
                muteState = 'mute'
                audio.muted = true;
            }
        };

        if (audio.readyState > 0) {
            displayDuration();
            setSliderMax();
            displayBufferedAmount();
        } else {
            audio.addEventListener('loadedmetadata', () => {
                displayDuration();
                setSliderMax();
                displayBufferedAmount();
            });
        }

        audio.addEventListener('progress', displayBufferedAmount);

        seekSlider.addEventListener('input', () => {
        currentTimeContainer.textContent = calculateTime(seekSlider.value);
        });

        seekSlider.addEventListener('change', () => {
            audio.currentTime = seekSlider.value;
        });
        audio.addEventListener('timeupdate', () => {
            seekSlider.value = Math.floor(audio.currentTime);
            currentTimeContainer.textContent = calculateTime(audio.currentTime);
        });
    }
    
}


const newAudio1 = new audio_player(document.querySelector(".player1"))
const newAudio2 = new audio_player(document.querySelector(".player2"))
const newAudio3 = new audio_player(document.querySelector(".player3"))

<div class="player1"></div>
<div class="player2"></div>
<div class="player3"></div>