<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
</head>
<body>
<audio id="audio" src="爱情根本靠不住.mp3"></audio>
<button id="musicPlay">播放/继续</button>
<button id="musicPause">暂停</button>
<button id="musicStop">停止</button>
<button id="musicMute">静音</button>
<button id="musicMax">最大音量</button>
<button id="musicLeft">左声道</button>
<button id="musicMiddle">平衡</button>
<button id="musicRight">右声道</button>
</body>
</html>
<script type="text/javascript">
var audio=document.getElementById("audio");
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
const track = audioCtx.createMediaElementSource(audio);
const gainNode = audioCtx.createGain(); // volume音量
const panner = new StereoPannerNode(audioCtx, {pan: 0}); // panning声道
track.connect(gainNode).connect(panner).connect(audioCtx.destination); // connect our chart连接到我们的设备
document.getElementById("musicPlay").onclick=function(){
if (audioCtx.state === 'suspended') { //如果是【暂停】，则调用audioCtx.resume()恢复
audioCtx.resume();
}
audio.play();
}
document.getElementById("musicPause").onclick=function(){
if (audioCtx.state === 'running') {//如果是【运行】，则调用audioCtx.suspend()暂停
audioCtx.suspend();
}
}
document.getElementById("musicStop").onclick=function(){audio.currentTime=0;audio.pause();}
document.getElementById("musicMute").onclick=function(){audio.volume=0;}
document.getElementById("musicMax").onclick=function(){audio.volume=1;}
document.getElementById("musicLeft").onclick=function(){
panner.pan.value = -1;
}
document.getElementById("musicMiddle").onclick=function(){
panner.pan.value = 0;
}
document.getElementById("musicRight").onclick=function(){
panner.pan.value = 1;
}
</script>
站内公告
