Home > other >  How to make multiple html elements use the same Javascript without copying code and changing variabl
How to make multiple html elements use the same Javascript without copying code and changing variabl

Time:10-18

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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related