<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.h5edu.cn</title>
</head>
<body>
<audio src="my.mp3" id="audio">
您的浏览器暂不支持audio标签
</audio>
<button onclick="play()">播放/暂停</button>
<button id="lt"><</button>
<span id="span">0.5</span>
<button id="gt">></button>
</body>
<script>
var audio=document.getElementById("audio");
var gt=document.getElementById("gt");
var lt=document.getElementById("lt");
var span=document.getElementById("span");
audio.volume = 0.5;
var num = 0.5;
lt.onclick = function(){
if(num<0.1){
num=0;
}else{
num=num - 0.1;
}
span.innerHTML = num.toFixed(1);
audio.volume = num;
}
gt.onclick = function(){
if(num>0.9){
num=1;
}else{
num=num + 0.1;
}
span.innerHTML = num.toFixed(1);
audio.volume = num;
}
function play(){
if(audio.paused){
audio.play();
}else{
audio.pause();
}
}
</script>
</html>
HTML5开发学习笔记—多媒体播放http://bbs.h5edu.cn/?/article/7430
上千款免费HTML5开发源码，网页开发，HTML5微信小游戏开发http://www.h5edu.cn/，小程序开发，前后端php开发各种需求HTML5源码尽在H5edu学习网。