JS廣播播放器在瀏覽網站時不斷重置

我在網站上使用JS廣播播放器。每當有人進入新頁面或刷新當前頁面時，音量滑塊重置爲25％。此外，每次有人進入新頁面時，無線電播放器都會重新啓動，導致音樂中斷。修復這些問題的最佳方法是什麼，以便記住用戶的音量和音樂在切換頁面時不會中斷？由於某些原因，我的初始音量設置爲25％，因爲它非常響亮。JS廣播播放器在瀏覽網站時不斷重置

- EDIT--
關於音量的問題已經得到解答，現在我只需要一個解決方案，讓播放器在切換頁面時不會重新啓動。

電臺播放器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'; 
    } 
}

電臺播放器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>

來源

2017-08-06 Layne Mayo

當頁面加載你設置滑塊值每次：player.volume = 0.25;

當用戶更改滑塊值或離開當前頁面時，將其值存儲在cookie中。刷新頁面時，將存儲的值從cookie中加載到播放器。

來源

2017-08-06 20:38:45 Schnatti

謝謝，這是使用cookie的好起點：https：//www.w3schools.com/js/js_cookies.asp？我問，因爲我以前沒有用過它們。 –

當您需要將參數從一頁傳遞到第二頁時，您可以使用不同的工藝：1）會話（服務器端），2）通過url傳遞參數3）cookie。當用戶離開頁面時Cookie仍然可以訪問。 – Schnatti

是的，我認爲開始使用cookie是一個好主意。 – Schnatti

JS廣播播放器在瀏覽網站時不斷重置

回答

相關問題