将音量条添加到 HTML 5 音频播放器答案

【问题标题】：Add volume bar to HTML 5 audio player将音量条添加到 HTML 5 音频播放器
【发布时间】：2017-01-30 21:15:48
【问题描述】：

我是 JavaScript 新手，正在尝试向我的 HTML 5 音频播放器添加音量条，但我没有取得很大成功。这是我目前所拥有的：

JS：

var VolumeSlider = player.querySelector('.volume-bar');
VolumeSlider.addEventListener('input', function(){
audio.volume=this.value;
step=.01;
min=0;
max=1;
value=1;
}, false);

PHP：

<div class="volume-bar"></div>

以上内容对添加音量条没有任何作用。 Codepen 链接：http://codepen.io/openbayou/pen/bgaOGE

再次感谢您的帮助。

【问题讨论】：

标签： javascript html5-audio

【解决方案1】：

将您的音量输入从 div 更改为输入类型范围。

(function(){

  var pcastPlayers = document.querySelectorAll('.pcast-player');
  var speeds = [ 1, 1.5, 2, 2.5, 3 ]

  for(i=0;i<pcastPlayers.length;i++) {
    var player = pcastPlayers[i];
    var audio = player.querySelector('audio');
    var play = player.querySelector('.pcast-play');
    var pause = player.querySelector('.pcast-pause');
    var rewind = player.querySelector('.pcast-rewind');
    var forward = player.querySelector('.pcast-forward');
    var progress = player.querySelector('.pcast-progress');
    var speed = player.querySelector('.pcast-speed');
    var mute = player.querySelector('.pcast-mute');
    var currentTime = player.querySelector('.pcast-currenttime');
    var duration = player.querySelector('.pcast-duration');
    var VolumeSlider = player.querySelector('.volume-bar');

    var currentSpeedIdx = 0;

    pause.style.display = 'none';

    var toHHMMSS = function ( totalsecs ) {
        var sec_num = parseInt(totalsecs, 10); // don't forget the second param
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours   < 10) {hours   = "0"+hours; }
        if (minutes < 10) {minutes = "0"+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}

        var time = hours+':'+minutes+':'+seconds;
        return time;
    }

    function onloadedmetadata(){
      progress.setAttribute('max', Math.floor(audio.duration));
      duration.textContent  = toHHMMSS(audio.duration);
    }
    if(audio.duration){
      onloadedmetadata();
    }else{  audio.addEventListener('loadedmetadata', onloadedmetadata);
    }
    audio.addEventListener('timeupdate', function(){
      progress.setAttribute('value', audio.currentTime);
      currentTime.textContent  = toHHMMSS(audio.currentTime);
    });

    play.addEventListener('click', function(){
      this.style.display = 'none';
      pause.style.display = 'inline-block';
      pause.focus();
      audio.play();
    }, false);

    pause.addEventListener('click', function(){
      this.style.display = 'none';
      play.style.display = 'inline-block';
      play.focus();
      audio.pause();
    }, false);

    rewind.addEventListener('click', function(){
      audio.currentTime -= 15;
    }, false);

    forward.addEventListener('click', function(){
      audio.currentTime += 15;
    }, false);

    progress.addEventListener('click', function(e){
      audio.currentTime = Math.floor(audio.duration) * (e.offsetX / e.target.offsetWidth);
    }, false);

    speed.addEventListener('click', function(){
      currentSpeedIdx = currentSpeedIdx + 1 < speeds.length ? currentSpeedIdx + 1 : 0;
      audio.playbackRate = speeds[currentSpeedIdx];
      this.textContent  = speeds[currentSpeedIdx] + 'x';
      return true;
    }, false);

    VolumeSlider.addEventListener('input', function(){
    audio.volume= parseInt(this.value)/10;
    step=.01;
    min=0;
    max=1;
    value=1;
    }, false);

    mute.addEventListener('click', function() {
      if(audio.muted) {
        audio.muted = false;
		 this.querySelector('span').innerHTML = 'Mute'; 
      } else {
        audio.muted = true;				 this.querySelector('span').innerHTML = 'Unmute';   
      }
    }, false);
  }
})(this);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Audio</title>
</head>
<body>
  <div class="pcast-player">
<div class="pcast-player-controls">
	<div class="player-left">
		<button class="pcast-rewind"><div class="rewind-bttn"><span class="text-left">-15</span></div></button>
		<button class="pcast-play"><span class="text">Play</span></button>
    <button class="pcast-pause"><span class="text">Pause</span></button>
		<button class="pcast-forward"><div class="forward-bttn"><span class="text-right">+15</span></div></button>
	</div>
	<div class="player-progress">
		<div class="player-bar">
			<progress class="pcast-progress" value="0"></progress>
		</div>
		<div class="player-time">
			<span class="pcast-currenttime pcast-time">00:00</span>/
			<span class="pcast-duration pcast-time">00:00</span>
		</div>
	</div>
	<div class="player-right">
		<button class="pcast-speed speed-button">1x</button>
    <button class="pcast-mute">
		<span class="text">Mute</span></button>
    	<input class="volume-bar" type="range" min="0" max="10">
	</div>
</div>
<audio src="http://www.podtrac.com/pts/redirect.mp3/feeds.soundcloud.com/stream/302696028-scott-johnson-27-filmsack-critcondition.mp3"></audio>
</div>
</body>
</html>

我对您的代码做了一些其他的小改动。根据您的要求对其进行更改。

【讨论】：

谢谢，非常感谢！一个问题：音量栏必须是input 而不是div？
是的，它必须是输入，否则您将无法设置任何值。
安全性怎么样？这是一个输入，我正在为问题敞开心扉？
如果您不保存对数据库的任何更改，那么您不必太担心安全性，并且您始终可以采取一些措施来清理表单输入。或者，您可以使用按钮而不是输入，这是一个 jsbin jsbin.com/xexifav/edit?html,js,output，带有用于增加和减少音量的按钮，我个人喜欢范围，因为它更直观。
再次感谢。我知道其他玩家可以在 div (stackoverflow.com/questions/20753756/…) 中制作音量条，但由于我对 jquery 的了解为零，因此可以这样做。再次感谢您的帮助。