- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在网站上使用 JS 广播播放器。每当有人进入新页面或刷新当前页面时,音量 slider 都会重置为 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';
}
}
广播播放器 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>
最佳答案
当页面加载时,您每次都设置 slider 值:player.volume = 0.25;
当用户更改 slider 值或离开当前页面时,将该值存储在 cookie 中。刷新页面时,将 cookie 中存储的值加载到播放器。
关于javascript - JS 广播播放器在浏览网站时不断重置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45536262/
我有这个网站,这个特定页面是安全的,但是当它回发时,它回发到一个不安全的页面。如何解决? 我正在使用 ASP.NET 向导。我有这个页面 - checkout.aspx,页面包含这个控件 checko
我有 2 个 azure 网站 - 两个独立的项目 我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
我有 2 个 azure 网站 - 两个独立的项目 我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
环境: 旧网站: React 托管在 Heroku URL( http://sameurl.com ) 新网站: Java 托管在 Heroku URL ( http://sameurl.com )
我已在 Windows Azure 上注册了一个测试帐户来对其进行测试。我构建了一个 Hello world ASP.NET Web 应用程序 + 数据库只是为了测试。 我安装了 Visual Stu
我有一个可以收集和显示各种测量值的产品(不会详细介绍)。正如人们所期望的那样,显示部分是一个数据库+建立在其之上的网站(使用 Symfony)。 但是,我们可能还会创建一个 API 来向第三方公开数据
这个问题在这里已经有了答案: Software keyboard resizes background image on Android (16 个答案) 关闭 8 年前。 我有一个类似的问题:So
这个问题似乎很常见,但我真的无法根据现有答案解决问题。 我有一个简单的 maven 项目,没有任何复杂的部署配置等,并且想在点击“mvn site”时生成一个 Maven CheckStyle 报告。
有没有人看过有关何时进行横向扩展与纵向扩展的最佳选择的任何分析或信息。什么时候一个比另一个更有意义。 目前,在标准模式和基本模式下,2 个小型实例的费用与 1 个中型实例的费用相同。 拥有 2 个小型
有没有办法找到 azure 网站何时停止? (我通过门户网站停止了网站,但我不记得是什么时候......) 我正在寻找一些日志,但没有找到任何有用的内容。 谢谢。 最佳答案 您拥有的最接近的是 azu
我目前在 Azure VM 的 IIS 中拥有一个网站。我已将该站点复制到 2 个可用区域中的 2 个虚拟机上。 这可以保护网站免遭停机。 我需要为高负载时刻实现一些可扩展性。这似乎就是创建音阶集的目
我有一个托管在 Azure 上的网站 ( http://mike-ward.azurewebsites.net/ )。我从 Azure 门户设置了一个指向(引用?)我的网站的 Azure CDN。根据
我有一个 Azure 网站(不是 Web 角色),有 2 个槽:生产和暂存。 我只想为生产插槽启用 CDN,而不是为登台启用,问题是我找不到识别主机插槽的方法。 RoleEnvironment 不可用
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题,以便可以用事实和引用来回答它。 4年前关
我们正在考虑将一些网站从 Azure 云服务迁移到 Azure 网站(事情似乎就是这样进行的)。显然,我们被明确告知云服务不会保留文件系统状态,因为它们会在机器故障时重新部署。 我假设网站是基于 Bl
我有一个 Azure 网站,需要使用在 VM 上运行的 Elasticsearch 服务。 虽然我需要能够锁定对 Elasticsearch 的访问,以便只有 Azure 网站可以访问它,但我似乎无法
我有一个 azure 网站,位于 yis3.azurewebsites.net - 我已将其提升为“共享”网站,以便我可以使用自定义域。我拥有从 123-reg.co.uk 购买的域名 yorkshi
我正在使用 abcPDF 动态创建 PDF。 我想保存这些 PDF,以便客户随时检索。最简单的方法(也是我现在在当前服务器上所做的方法)是将完成的 PDF 保存到文件系统。 看来我一直坚持使用 blo
我们正在尝试了解 Windows Azure 管理 API 为 Azure 网站(而非 Webroles)返回的监控数据的复杂性 例如,下图描述了为 CPUTime 检索的数据点。它似乎表明,在晚上
看起来真的很愚蠢,因为我找不到它: 门户网站似乎不太直观,我如何为一个“网站”付费并在其中运行最多 500 个网站?我想当我通过单击左下角的加号添加“网站”时,我添加了整个虚拟机而不是子站点。如何仅添
我是一名优秀的程序员,十分优秀!