javascript - 如何将 "media.setVolume"函数转换为进度条或搜索栏？

Question

我想使用phonegap开发一个应用程序并在其上播放mp3文件。我在这个网站上学习如何开发媒体应用程序 http://docs.phonegap.com/en/2.8.0/cordova_media_media.md.html但我想将“media.setVolume”函数转换为进度条或搜索栏，我花了很多精力尝试将“media.setVolume”函数转换为进度条或搜索栏，但不起作用…… ........

我的 Javscript 和 html 文件

var my_media = null;
    	var mediaTimer = null;

  	
    	function pauseAudio() {
    		if (my_media) {
    			my_media.pause();
    		}
    	}
    	function stopAudio() {
    		if (my_media) {
    			my_media.stop();
                window.location.reload();
    		}
    		clearInterval(mediaTimer);
    		mediaTimer = null;
    	}

     function setVolume(volume) {/*I want use this function to volume bar*/
                if (my_media) {
                    my_media.setVolume(volume);
                }
            }

<div class="mediaplay">
    <a id="play_btn" href="#" onclick="playAudio(getPhoneGapPath () + 'media/01.mp3');">Play</a>	
    <a id="pause_btn" href="#" onclick="pauseAudio();">Pause</a> 
    <a id="stop_btn" href="#" onclick="stopAudio();">Stop</a>
<!--I want use this function to volume bar-->
    <input type="range" class="Volume_bar" value="setVolume(90)">
<!--I want use this function to volume bar-->
</div>

我想将“Volume_bar”转换为进度条，用户可以滚动Volume_bar来调节音量，在phonegap中如何实现？

Answer 1

您必须在输入范围上定义一个事件监听器，当用户与控件交互时将执行该事件监听器:

<input id="volume" type="range" class="Volume_bar">

JS部分:

document.getElementById('volume').addEventListener('input', function(e) {
     const level = e.currentTarget.value;
     console.log('Current volume level: ' + level);

     setVolume(level);
});