Der JS-Radio-Player wird beim Navigieren der Website zurückgesetzt

Question

Ich verwende einen JS-Radio-Player auf einer Website. Immer wenn jemand auf eine neue Seite geht oder die aktuelle Seite aktualisiert, wird der Lautstärkeregler auf 25% zurückgesetzt. Jedes Mal, wenn jemand auf eine neue Seite geht, startet der Radio-Player neu und verursacht eine Unterbrechung der Musik. Was wäre der beste Weg, um diese Probleme zu beheben, so dass es sich an die Lautstärke des Benutzers erinnert und die Musik beim Wechseln der Seiten nicht kaputt geht? Ich habe derzeit die anfängliche Lautstärke auf 25% beim Laden eingestellt, weil es aus irgendeinem Grund extrem laut ist.

--EDIT--
Meine Frage zu Volume wurde beantwortet, jetzt brauche ich nur eine Lösung, um den Player vom Neustart beim Seitenwechsel zu halten.

Radio Player 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'; 
    } 
} 

Radio Player HTML:

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

Answer 1

Wenn die Seite, die Sie lädt den Slider Wert jedes Mal einstellen: player.volume = 0,25;

Wenn der Benutzer den Schiebereglerwert ändert oder die aktuelle Seite belässt, speichern Sie den Wert in einem Cookie. Wenn die Seite aktualisiert wurde, laden Sie die gespeicherten Werte von Ihrem Cookie auf den Player.