Как добавить скролинг звука?

[bridun]

Как сделать скролинг звука, здесь только 0-100 чтоб можно было передвигать его както

/*Громкость*/
function editVolume () {                
    if (player.getVolume() == 0) {
        player.setVolume('100');
    } else {
        player.setVolume('0');
    }
}

[j0hnik]

player.onwheel = function(e){
	var del = e.deltaY/100;
	this.setVolume( this.getVolume() + del > 100 ? 100 : this.getVolume() + del < 0 ? 0 : this.getVolume() + del );
};

[bridun]

это еще какойто импут к этому нужно?

[j0hnik]

onwheel = function(e){
	var del = e.deltaY/100;
	player.setVolume( player.getVolume() + del > 100 ? 100 : player.getVolume() + del < 0 ? 0 : player.getVolume() + del );
};

если не работает, так попробуйте, или сделайте макет, я хз что за плеер у вас

[bridun]

Вот весь плеер, как к нему сделать ползунок звука здесь просто 0-100

<div class="panel">
<button id="back" onclick="player.previousVideo();">Back</button>
<button id="play" onclick="player.playVideo();">Play</button>
<button id="pause" onclick="player.pauseVideo();">Pause</button>
<button id="next" onclick="player.nextVideo();">Next</button>
<div id="time">00:00</div>		
<div id="line" onclick="progress (event);">
<div class="viewed"></div>
<div id="fader" onclick="alert('fader');"></div>
</div>
<button id="volume" onclick="editVolume ();">Громкость</button>
<div id="quality">Auto</div>
<button id="full" onclick="playFullscreen ();">FullScreen</button>
</div>		
<div>
<button id="playlist" onclick="loadPlaylistVideoIds();">Load New Playlist</button>
<button id="qual" onclick="editQuality ();">Сменить качество на 480</button>
</div>

//Инициализация плеера
function onYouTubeIframeAPIReady() {
	  player = new YT.Player('player', {
		height: '500',
		playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0},
		width: '850',
		videoId: 'CyVuYAHiZb8',
		events: {
		  'onReady': onPlayerReady
		}
  });
}

// Обработчик готовность
function onPlayerReady(event) {
	var player = event.target;
	iframe = document.getElementById('player');
	setupListener(); 			  
	updateTimerDisplay();
	updateProgressBar();
				
	time_update_interval = setInterval(function () {
		updateTimerDisplay();
		updateProgressBar();
	}, 1000);		  
}
/*Слушать события*/
function setupListener (){
	document.getElementById('full').addEventListener('click', playFullscreen);
}
/*Включение фуллскрина*/
function playFullscreen (){
	player.playVideo();//won't work on mobile
			  
	  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
	  if (requestFullScreen) {
		requestFullScreen.bind(iframe)();
	  }
}
/*Загрузить плейлист*/			
function loadPlaylistVideoIds(); {
	player.loadPlaylist({
		'playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'],
		'listType': 'playlist',
		'index': 0,
		'startSeconds': 0,
		'suggestedQuality': 'small'
			});
}			
/*Громкость*/
/*function editVolume () {				
	if (player.getVolume() == 0) {
		player.setVolume('100');
	}else {
		player.setVolume('0');
	}
};
	*/	
	
/*player.onwheel = function(e){
	var del = e.deltaY/100;
	this.setVolume( this.getVolume() + del > 100 ? 100 : this.getVolume() + del < 0 ? 0 : this.getVolume() + del );
};
*/

onwheel = function(e){
	var del = e.deltaY/100;
	player.setVolume( player.getVolume() + del > 100 ? 100 : player.getVolume() + del < 0 ? 0 : player.getVolume() + del );
};
			
/*Качество*/
function editQuality () {
	player.setPlaybackQuality('medium');			
	document.getElementById('quality').innerHTML = '480';
}
			
// Обновляем время на панельке - счетчик
function updateTimerDisplay(){
	document.getElementById('time').innerHTML = formatTime(player.getCurrentTime());
}
/*Формат времени*/
function formatTime(time){
	time = Math.round(time);
	var minutes = Math.floor(time / 60),
	seconds = time - minutes * 60;
	seconds = seconds < 10 ? '0' + seconds : seconds;
	return minutes + ":" + seconds;
}

// Обновляем прогресс
function updateProgressBar(){

	var line_width = jQuery('#line').width();
	var persent = (player.getCurrentTime() / player.getDuration());
	jQuery('.viewed').css('width', persent * line_width);
	per = persent * 100;
	jQuery('#fader').css('left', per+'%');
}

/*Линия прогресса*/
function progress (event) {
				
	var line_width = jQuery('#line').width();
	// положение элемента
	var pos = jQuery('#line').offset();
	var elem_left = pos.left;		
	// положение курсора внутри элемента
	var Xinner = event.pageX - elem_left;
	var newTime = player.getDuration() * (Xinner / line_width);
	// Skip video to new time.
	player.seekTo(newTime);
}

[j0hnik]

<!DOCTYPE html>
<html>
<body>
	<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
		<div id="player"></div>
<div class="panel">
<button id="play" onclick="player.playVideo();">Play</button>
<button id="pause" onclick="player.pauseVideo();">Pause</button>
<input type="range" id="plRange" step="2" min="0" max="100">
</div>		


		<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
      	player = new YT.Player('player', {
      		height: '360',
      		width: '640',
      		videoId: 'M7lc1UVf-VE',
      		events: {
      			'onReady': onPlayerReady,
      			'onStateChange': onPlayerStateChange
      		}
      	});
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
      	event.target.playVideo();
      	plRange.value = player.getVolume();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
      	if (event.data == YT.PlayerState.PLAYING && !done) {
      		setTimeout(stopVideo, 6000);
      		done = true;
      	}
      }
      function stopVideo() {
      	player.stopVideo();
      }
      plRange.oninput = e => player.setVolume(e.target.value);
      document.querySelector('.panel').onwheel = function(e){
e.preventDefault();
      	var del = e.deltaY/50;
      	var vol = player.getVolume() + del > 100 ? 100 : player.getVolume() + del < 0 ? 0 : player.getVolume() + del;
      	player.setVolume( vol );
      	plRange.value = vol;
      };

    </script>
  </body>
  </html>

крутить над .panel, если нужно, можно переставить на window

макет отсюда https://developers.google.com/youtub...eference?hl=ru