带有音量滑块的音频播放按钮

Question

所以我有此音频播放按钮的代码，但我想向按钮添加音量滑块。因此，您可以更改音频播放的音量。但是我至少想对此做些造型。我有一个批量幻灯片代码，您可以签出。我的问题是此音量滑块自行播放音频。因此，“停止”的唯一方法是使音频静音 链接到音量滑块：http://jsfiddle.net/Lmejb2ks/3/

按钮代码：

 <div class="ex1">

  <a id="play-pause-button" class="fa fa-play"></a>
 <script     src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"     > 
</script>

<script>
var audio = new Audio("http://listen.shoutcast.com/newfm128");

$('#play-pause-button').on("click",function(){
if($(this).hasClass('fa-play'))
{
$(this).removeClass('fa-play');
$(this).addClass('fa-pause');
audio.play();
}
else
{
$(this).removeClass('fa-pause');
$(this).addClass('fa-play');
audio.pause();
}
});

audio.onended = function() {
$("#play-pause-button").removeClass('fa-pause');
$("#play-pause-button").addClass('fa-play');
};

</script>


<style media="screen" type="text/css">
@import url(https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.6.3/css/font-awesome.min.css);
#play-pause-button{
 font-size: 50px;
 cursor: pointer;
color: black;
position: relative;
}
</style>