Question

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

再次感谢您的帮助。

Answer 1

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

＆＃13;

(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);

＆＃13;

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

＆＃13;

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

将音量栏添加到HTML 5音频播放器

1 个答案: