堆棧內存溢出
  簡體   English   中英

如何在不復制代碼和更改變量的情況下使多個 html 元素使用相同的 Javascript？

[英]How to make multiple html elements use the same Javascript without copying code and changing variables?

 原文  2021-10-17 14:24:12  2   1    javascript/ html

問題描述

如果標題不清楚，我深表歉意，我用 html 和 java 創建了一個簡單的音頻播放器，有沒有辦法將其中的多個放在我的網站上，而無需重寫所有變量、ID 和其他內容？

我想我需要使用類，但我對 OOP 的了解並不多，因此感謝您的幫助。

這是我的 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>

和 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);
});

1 個解決方案

解決方案1
 1 已采納  2021-10-17 15:05:30

我已將所有代碼轉換為基於類的，因此現在您可以根據需要創建任意數量的實例

我已將所有 getElementById 更改為querySelector因為它更適合這種情況

 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" 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> ` 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在多個html元素上重復相同的Javascript代碼 如何使Javascript代碼分別對每個元素起作用，以使用相同的Javascript代碼在HTML中創建多個重復項 如何在JavaScript中對私有變量使用與函數自變量相同的名稱？ （使代碼看起來更好） 如何在不使用全局變量的情況下使數據隨時可用於多個Javascript函數？ 如何使 JavaScript 中添加的元素與 HTML 中添加的元素反應相同？ 如何在反應中在同一個 html 元素上使用多個 ref 變量？ 如何將 JavaScript 代碼拆分為多個文件並在不通過 HTML 中的腳本標簽包含它們的情況下使用它們？ 如何在具有相同類的多個 HTML div 上使用相同的 javascript 函數 如何在沒有 ID 屬性的多個 DIV 元素上調用 JavaScript 代碼？ 在 JavaScript HTML 中呈現多個具有相同 ID 的元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM