javascript - 两个滑块上的网络音频音量变化
问题描述
我之前问过这个问题，但删除了它，因为它是错误的代码，我目前正在开发一个收音机播放器并且在 Javascript 中有点新，我需要添加两个音量滑块，当一个上升时另一个也需要上升用它。我尝试检查并尝试了所有方法，但似乎没有任何帮助。我究竟做错了什么？
这是我当前的代码（给它一些时间来加载无线电播放器）
const audio = document.querySelector('#stream')
const playPauseButton = document.querySelector('[name="play-pause"]')
const playPauseButtonIcon = playPauseButton.querySelector('i.fas')
const volumeControl = document.querySelector('[name="volume"]')
const currentlyPlaying = document.querySelector('.currently-playing-title')
let isPlaying = false
let fetchInterval = null
let currentVolume = 0.8
audio.volume = currentVolume
const fetchCurrentlyPlaying = () => fetch('...')
.then(response => response.json())
.then(data => currentlyPlaying.innerText = data.currentSong)
volumeControl.addEventListener('input', () => {
const volume = parseFloat(volumeControl.value)
audio.volume = currentVolume = volume
currentVolume = volume
})
playPauseButton.addEventListener('click', () => {
if (isPlaying) {
audio.pause()
playPauseButtonIcon.classList.remove('fa-pause')
playPauseButtonIcon.classList.add('fa-play')
clearInterval(fetchInterval)
currentlyPlaying.innerText = 'Er wordt geen nummer gedraaid'
} else {
audio.play()
playPauseButtonIcon.classList.remove('fa-play')
playPauseButtonIcon.classList.add('fa-pause')
fetchCurrentlyPlaying()
fetchInterval = setInterval(fetchCurrentlyPlaying, 3000)
}
isPlaying = !isPlaying
}).radio-player {
margin: 30px;
}
.button {
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
background-color: #F59E0B;
color: #fff;
border-radius: 100%;
}
.play-pause-button {
width: 70px;
height: 70px;
font-size: 25px;
margin-right: 24px;
}
.mute-button {
width: 30px;
height: 30px;
margin-right: 12px;
}
.player-controls {
display: flex;
align-items: center;
}
.currently-playing {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}
.volume-controls {
display: flex;
align-items: center;
}
.currently-playing-label {
font-size: 12px;
font-weight: 300;
}
.currently-playing-title {
font-size: 22px;
}
.volume {
-webkit-appearance: none;
appearance: none;
border: 1px solid #000;
border-radius: 50px;
overflow: hidden; /* This will help with styling the thumb */
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 15px;
width: 15px;
cursor: ew-resize;
background: #F59E0B;
box-shadow: -400px 0 0 390px #FDE68A;
border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
/* same as above */
}
input[type="range"]::-ms-thumb {
/* same as above */
}
input[type="range"]:focus {
border-radius: 50px;
box-shadow: 0 0 15px -4px #F59E0B;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
<div class="radio-player">
<audio src="https://live.hostingbudget.nl:1045/stream" class="visually-hidden" id="stream">
<!-- More stuff here -->
</audio>
</div>
<div class="player-controls">
<button name="play-pause" class="button play-pause-button" aria-label="Play/pause">
<i class="fas fa-play" aria-hidden></i>
</button>
<div class="volume-and-title">
<div class="currently-playing" aria-label="Currently playing">
<span class="currently-playing-label">Now playing on Some Radio Station</span>
<span class="currently-playing-title">Listen to Some Radio Station</span>
</div>
<div class="volume-controls">
<input type="range" name="volume" class="volume" min="0" max="1" step="0.05" value="0.2" aria-label="Volume">
<input type="range" name="volume2" class="volume" min="0" max="1" step="0.05" value="0.2" aria-label="Volume">
</div>
</div>
</div>
<script src="js/radioaudio.js"></script>
</body>
</html>解决方案
您可以做的一件事是将事件侦听器添加到父 div。然后在事件监听器中，获取滑块的值并将其分配给两个滑块：
const audio = document.querySelector('#stream')
const playPauseButton = document.querySelector('[name="play-pause"]')
const playPauseButtonIcon = playPauseButton.querySelector('i.fas')
// *** Use the parent div
const volumeControl = document.querySelector('[class="volume-controls"]');
const currentlyPlaying = document.querySelector('.currently-playing-title')
let isPlaying = false
let fetchInterval = null
let currentVolume = 0.8
audio.volume = currentVolume
const fetchCurrentlyPlaying = () => fetch('...')
.then(response => response.json())
.then(data => currentlyPlaying.innerText = data.currentSong)
volumeControl.addEventListener('input', (e) => {
// Get the value from whichever slider caused the event
const volume = parseFloat(e.srcElement.value);
// Assign the value to all sliders
document.querySelectorAll('[type="range"]').forEach((v) => v.value = volume);
audio.volume = currentVolume = volume
currentVolume = volume
})
playPauseButton.addEventListener('click', () => {
if (isPlaying) {
audio.pause()
playPauseButtonIcon.classList.remove('fa-pause')
playPauseButtonIcon.classList.add('fa-play')
clearInterval(fetchInterval)
currentlyPlaying.innerText = 'Er wordt geen nummer gedraaid'
} else {
audio.play()
playPauseButtonIcon.classList.remove('fa-play')
playPauseButtonIcon.classList.add('fa-pause')
fetchCurrentlyPlaying()
fetchInterval = setInterval(fetchCurrentlyPlaying, 3000)
}
isPlaying = !isPlaying
}).radio-player {
margin: 30px;
}
.button {
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
background-color: #F59E0B;
color: #fff;
border-radius: 100%;
}
.play-pause-button {
width: 70px;
height: 70px;
font-size: 25px;
margin-right: 24px;
}
.mute-button {
width: 30px;
height: 30px;
margin-right: 12px;
}
.player-controls {
display: flex;
align-items: center;
}
.currently-playing {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}
.volume-controls {
display: flex;
align-items: center;
}
.currently-playing-label {
font-size: 12px;
font-weight: 300;
}
.currently-playing-title {
font-size: 22px;
}
.volume {
-webkit-appearance: none;
appearance: none;
border: 1px solid #000;
border-radius: 50px;
overflow: hidden; /* This will help with styling the thumb */
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 15px;
width: 15px;
cursor: ew-resize;
background: #F59E0B;
box-shadow: -400px 0 0 390px #FDE68A;
border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
/* same as above */
}
input[type="range"]::-ms-thumb {
/* same as above */
}
input[type="range"]:focus {
border-radius: 50px;
box-shadow: 0 0 15px -4px #F59E0B;
}<div class="radio-player">
<audio src="https://live.hostingbudget.nl:1045/stream" class="visually-hidden" id="stream">
<!-- More stuff here -->
</audio>
</div>
<div class="player-controls">
<button name="play-pause" class="button play-pause-button" aria-label="Play/pause">
<i class="fas fa-play" aria-hidden></i>
</button>
<div class="volume-and-title">
<div class="currently-playing" aria-label="Currently playing">
<span class="currently-playing-label">You are listening to radio</span>
<span class="currently-playing-title">Currently playing:</span>
</div>
<div class="volume-controls">
<input type="range" name="volume" class="volume" min="0" max="1" step="0.05" value="0.2" aria-label="Volume">
<input type="range" name="volume2" class="volume" min="0" max="1" step="0.05" value="0.2" aria-label="Volume">
</div>
</div>
</div>推荐阅读
- react-native - 使用 react-native-fbsdk 注销的正确方法
- php - 提取带参数的函数调用
- windows - 系统在“C:\Windows\Fonts”文件夹中找不到当前运行进程的目录
- amazon-ec2 - 在 anaconda 中使用 Caffe2 获取 GPU 信息
- javascript - 无法解决扩展中的内容安全策略错误
- database - 从远程虚拟机传输数据文件的简单方法
- angularjs - 如何在不知道数据模型的情况下显示对象数组
- ansible - Ansible 变量算术运算
- spring-boot - Spring云服务器和客户端版本需要匹配吗？
- python-3.x - 根据条件替换指定列列表中的值