i finally solved this problem as follow :
this problem can be very well solved by using the <audio > label,
this is a test file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> HTML5 input元素type=range </title>
</head>
<body>
<input id="range" type="range" min="1" max="100" value="5" οnchange="change()" >
<span id="value">5</span>
<br>
<br>
<br>
<video style="float:left;" id="video1" preload="metadata" src="test1.mp3" height="300" autoplay="autoplay" controls="controls">
你的浏览器不支持html5视频
</video>
<br>
<br>
<br><!--
<button id="upVolume" οnclick="getVolume()" >音量+</button>
<button id="downVolume">音量-</button>
-->
<script type='text/javascript'>
// var value = document.getElementById('range').value ;
// var myVid=document.getElementById("video1");
// function getVolume()
// {
// myVid.volume=change().value;
// alert(myVid.volume);
// }
// var button=document.getElementById("upVolume");
// // var button=document.getElementById("upVolume").contentWindow.document.getElementById("clickindoc");
// button.οnclick=function(){
// getvolume();
// // window.location.assign( "#gallery");
// // alert("you are being hacked!!!");
// }
function change() {
var value = document.getElementById('range').value ;
document.getElementById('value').innerHTML= value;
var getvalue=value;
// alert(getvalue);
myVid=document.getElementById("video1");
myVid.volume=getvalue/100;
}
// var $ = function(id){return document.getElementById(id);};
// var _video = $("testVideo");
//加大声音,每次加大1/10
// upVolume : function(){
// _video.volume += 0.1;
// },
// //减小声音,每次减小1/10
// downVolume : function(){
// _video.volume -= 0.1;
// },
// //绑定页面上各个按钮的事件
// var btns = document.getElementsByTagName("button");
// for(var i = 0 ;i < btns.length ; i++){
// var el = btns[i];
// el.onclick = self[el.id];
// }
</script>
</body>
</html>
can play the music and the volume can be change by that processbar.