<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hoyo 教你 Web Audio API – 05</title>
</head>
<body>
<audio src="https://playx.fun/stream/AgxAN:DXX1rB" id="audio" style="display: none;"></audio>
<button type="button" onclick="play()">播放</button>
<button type="button" onclick="pause()">暫停</button>
<label style="width: 100%;"><input type="range" class="volumeGain" min="0" max="100" step="1" value="50"></label>
<p>播放進度：</p>
<label><input type="range" class="playTime" id="getPlayTime" min="0" value="0" style="width: 100%;"></label>
<label><input type="range" class="playTime" id="setPlayTime" min="0" value="0" style="width: 100%;"></label>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
var audio = document.getElementById("audio");
// 播放
function play(){
audio.play();
// 將播放進度條的最大值設定為歌曲長度
$('.playTime').attr('max', audio.duration);
}
// 暫停
function pause(){
audio.pause();
}
// 取得音量滑軌 控制音量
$('.volumeGain').on('input change', function(){
var val = $(this).val();
audio.volume = val / 100;
});
//
function getCurrentTime(){
alert(audio.currentTime);
}
//
function setCurrentTime(val){
audio.currentTime = val;
}
// 播放時間異動時 執行功能
audio.ontimeupdate = function(){
$('#getPlayTime').val(audio.currentTime);
};
// 變更播放進度時
$('#setPlayTime').on('change', function(){
var val = $(this).val();
audio.currentTime = val;
});
</script>
</body>
</html>
