Javascript JS radio player在浏览网站时不断重置

我在一个网站上使用JS广播播放器。每当有人转到新页面或刷新当前页面时，音量滑块将重置为25%。此外，每当有人进入新页面时，收音机播放器就会重新启动，导致音乐中断。解决这些问题的最佳方法是什么，这样它就能记住用户的音量，并且在切换页面时音乐不会中断？我目前在加载时将初始音量设置为25%，因为出于某种原因，音量非常大

--编辑--
我关于音量的问题已经得到了回答，现在我只需要一个解决方案来防止播放器在切换页面时重新启动

无线电播放器JS：

'use strict';
var audioPlayer = document.querySelector('.ggr-radio-player');
var playPause = audioPlayer.querySelector('#playPause');
var playpauseBtn = audioPlayer.querySelector('.play-pause-btn');
var loading = audioPlayer.querySelector('.loading');
var progress = audioPlayer.querySelector('.ggr-progress');
var sliders = audioPlayer.querySelectorAll('.ggr-slider');
var volumeBtn = audioPlayer.querySelector('.ggr-volume-btn');
var volumeControls = audioPlayer.querySelector('.ggr-volume-controls');
var volumeProgress = volumeControls.querySelector('.ggr-slider .ggr-progress');
var player = audioPlayer.querySelector('audio');
var currentTime = audioPlayer.querySelector('.current-time');
var totalTime = audioPlayer.querySelector('.total-time');
var speaker = audioPlayer.querySelector('#speaker');
var draggableClasses = ['pin'];
var currentlyDragged = null;
player.volume = 0.25;
window.addEventListener('mousedown', function (event) {
    if (!isDraggable(event.target)) return false;
    currentlyDragged = event.target;
    var handleMethod = currentlyDragged.dataset.method;
    this.addEventListener('mousemove', window[handleMethod], false);
    window.addEventListener('mouseup', function () {
        currentlyDragged = false;
        window.removeEventListener('mousemove', window[handleMethod], false);
    }, false);
});
playpauseBtn.addEventListener('click', togglePlay);
player.addEventListener('timeupdate', updateProgress);
player.addEventListener('volumechange', updateVolume);
player.addEventListener('loadedmetadata', function () {
    totalTime.textContent = formatTime(player.duration);
});
player.addEventListener('canplay', makePlay);
player.addEventListener('ended', function () {
    playPause.attributes.d.value = "M18 12L0 24V0";
    player.currentTime = 0;
});
volumeBtn.addEventListener('click', function () {
    volumeBtn.classList.toggle('open');
    volumeControls.classList.toggle('hidden');
});
window.addEventListener('resize', directionAware);
sliders.forEach(function (slider) {
    var pin = slider.querySelector('.pin');
    slider.addEventListener('click', window[pin.dataset.method]);
});
directionAware();

function isDraggable(el) {
    var canDrag = false;
    var classes = Array.from(el.classList);
    draggableClasses.forEach(function (draggable) {
        if (classes.indexOf(draggable) !== -1) canDrag = true;
    });
    return canDrag;
}

function inRange(event) {
    var rangeBox = getRangeBox(event);
    var rect = rangeBox.getBoundingClientRect();
    var direction = rangeBox.dataset.direction;
    if (direction == 'horizontal') {
        var min = rangeBox.offsetLeft;
        var max = min + rangeBox.offsetWidth;
        if (event.clientX < min || event.clientX > max) return false;
    }
    else {
        var min = rect.top;
        var max = min + rangeBox.offsetHeight;
        if (event.clientY < min || event.clientY > max) return false;
    }
    return true;
}

function updateProgress() {
    var current = player.currentTime;
    var percent = current / player.duration * 100;
    progress.style.width = percent + '%';
    currentTime.textContent = formatTime(current);
}

function updateVolume() {
    volumeProgress.style.height = player.volume * 100 + '%';
    if (player.volume >= 0.5) {
        speaker.attributes.d.value = 'M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z';
    }
    else if (player.volume < 0.5 && player.volume > 0.05) {
        speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z';
    }
    else if (player.volume <= 0.05) {
        speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667';
    }
}

function getRangeBox(event) {
    var rangeBox = event.target;
    var el = currentlyDragged;
    if (event.type == 'click' && isDraggable(event.target)) {
        rangeBox = event.target.parentElement.parentElement;
    }
    if (event.type == 'mousemove') {
        rangeBox = el.parentElement.parentElement;
    }
    return rangeBox;
}

function getCoefficient(event) {
    var slider = getRangeBox(event);
    var rect = slider.getBoundingClientRect();
    var K = 0;
    if (slider.dataset.direction == 'horizontal') {
        var offsetX = event.clientX - slider.offsetLeft;
        var width = slider.clientWidth;
        K = offsetX / width;
    }
    else if (slider.dataset.direction == 'vertical') {
        var height = slider.clientHeight;
        var offsetY = event.clientY - rect.top;
        K = 1 - offsetY / height;
    }
    return K;
}

function changeVolume(event) {
    if (inRange(event)) {
        player.volume = getCoefficient(event);
    }
}

function formatTime(time) {
    var min = Math.floor(time / 60);
    var sec = Math.floor(time % 60);
    return min + ':' + (sec < 10 ? '0' + sec : sec);
}

function togglePlay() {
    if (player.paused) {
        playPause.attributes.d.value = "M0 0h6v24H0zM12 0h6v24h-6z";
        player.play();
    }
    else {
        playPause.attributes.d.value = "M18 12L0 24V0";
        player.pause();
    }
}

function makePlay() {
    playpauseBtn.style.display = 'block';
    loading.style.display = 'none';
}

function directionAware() {
    if (window.innerHeight < 250) {
        volumeControls.style.bottom = '-54px';
        volumeControls.style.left = '54px';
    }
    else if (audioPlayer.offsetTop < 154) {
        volumeControls.style.bottom = '-164px';
        volumeControls.style.left = '-3px';
    }
    else {
        volumeControls.style.bottom = '52px';
        volumeControls.style.left = '-3px';
    }
}

“严格使用”；
var audioPlayer=document.querySelector（“.ggr无线电播放器”）；
var playPause=audioPlayer.querySelector（“#playPause”）；
var playbausebtn=audioPlayer.querySelector（'.play pause btn'）；
var load=audioPlayer.querySelector（'.load'）；
var progress=audioPlayer.querySelector（'.ggr progress'）；
var sliders=audioPlayer.querySelectorAll（'.ggr slider'）；
var volumeBtn=audioPlayer.querySelector（'.ggr volume btn'）；
var volumeControls=audioPlayer.querySelector（'.ggr volume controls'）；
var volumeeprogress=volumeControls.querySelector（'.ggr slider.ggr progress'）；
var player=audioPlayer.querySelector（'audio'）；
var currentTime=audioPlayer.querySelector（“.current time”）；
var totalTime=audioPlayer.querySelector（“.total time”）；
var speaker=audioPlayer.querySelector（“#speaker”）；
var draggableClasses=['pin']；
var currentlydrable=null；
player.volume=0.25；
window.addEventListener（'mousedown'，函数（事件）{
如果（！isDragable（event.target））返回false；
currentlydrable=event.target；
var handleMethod=currentlydrable.dataset.method；
this.addEventListener（'mousemove'，window[handleMethod]，false）；
window.addEventListener（'mouseup'，function（）{
currentlydrable=false；
removeEventListener（'mousemove'，window[handleMethod]，false）；
}，假）；
});
playpauseBtn.addEventListener（“单击”，切换播放）；
player.addEventListener（'timeupdate'，updateProgress）；
player.addEventListener（'volumechange'，updateVolume）；
player.addEventListener（'loadedmetadata'，函数（）{
totalTime.textContent=格式时间（player.duration）；
});
player.addEventListener（'canplay'，makePlay）；
player.addEventListener（'end'，函数（）{
playPause.attributes.d.value=“M18 12L0 24V0”；
player.currentTime=0；
});
volumeBtn.addEventListener（'click'，函数（）{
volumeBtn.classList.toggle（'open'）；
volumeControls.classList.toggle（'hidden'）；
});
window.addEventListener（'resize'，DirectionWare）；
滑块。forEach（函数（滑块）{
var pin=slider.querySelector（'.pin'）；
slider.addEventListener（'click'，window[pin.dataset.method]）；
});
DirectionWare（）；
函数IsDragable（el）{
var canDrag=假；
var classes=Array.from（el.classList）；
forEach（函数（可拖动）{
if（classes.indexOf（draggable）！=-1）canDrag=true；
});
返回烛台；
}
范围内的函数（事件）{
var rangeBox=getRangeBox（事件）；
var rect=rangeBox.getBoundingClientRect（）；
var direction=rangeBox.dataset.direction；
如果（方向=‘水平’）{
var min=rangeBox.offsetLeft；
var max=最小值+rangeBox.offsetWidth；
if（event.clientXmax）返回false；
}
否则{
var min=rect.top；
var max=最小值+范围框。远视；
if（event.clientYmax）返回false；
}
返回true；
}
函数updateProgress（）{
var current=player.currentTime；
var percent=当前/player.duration*100；
progress.style.width=百分比+'%'；
currentTime.textContent=格式时间（当前）；
}
函数updateVolume（）{
volumeProgress.style.height=player.volume*100+'%'；
如果（player.volume>=0.5）{
speaker.attributes.d.value='M14.667.0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.333-2.983.333-2.987-334.333-138h5.333-3zm17.334v1.367v1'2；
}
否则如果（player.volume<0.5&&player.volume>0.05）{
speaker.attributes.d.value='M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z'；
}
else if（player.volume当页面加载时，您每次设置滑块值：player.volume=0.25

当用户更改滑块值或离开当前页面时，将该值存储在cookie中。
刷新页面时，将存储的值从cookie加载到播放器。
谢谢，这是否是使用cookie的良好起点：？我这样问是因为我以前没有使用过它们。当需要将参数从一页传递到第二页时，可以使用不同的技术：1）会话（服务器端），2）通过url传递参数3）Cookie。当用户离开页面时，Cookie仍然可以访问。好的，那应该可以解决音量问题。对于让收音机播放器在更改页面时保持音乐播放，您有什么建议吗？现在，每当有人更改到新页面，音乐都会在页面加载时暂停一秒钟。从玩家在哪里？在导航栏的每一页上
                <div class="ggr-radio">
                    <div class="ggr-now-playing">
                        <marquee behavior="scroll" direction="left" scrollamount="2">
                            <span id="cc_strinfo_trackartist_gamersguildradio" class="cc_streaminfo"></span> - <span id="cc_strinfo_tracktitle_gamersguildradio" class="cc_streaminfo"></span>
                        </marquee>
                    </div>
                    <div class="audio ggr-radio-player">
                        <div class="loading">
                            <div class="spinner"></div>
                        </div>
                        <div class="play-pause-btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24">
                                <path fill="#566574" fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" class="play-pause-icon" id="playPause" />
                            </svg>
                        </div>
                        <div class="controls">
                            <span class="current-time">0:00</span>
                        </div>
                        <div class="ggr-volume">
                            <div class="ggr-volume-btn">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <path fill="#566574" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" id="speaker"/>
                                </svg>
                            </div>
                            <div class="ggr-volume-controls hidden">
                                <div class="ggr-slider" data-direction="vertical">
                                    <div class="ggr-progress">
                                        <div class="pin" id="ggr-volume-pin" data-method="changeVolume">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <audio crossorigin autoplay id="radio">
                            <source src="http://192.95.18.39:5272/stream" type="audio/mp3">
                        </audio>
                    </div>
                </div>