<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Audio Sample1</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
footer{ text-align:right; font-size:12px; }
#btn-play{ width:100px; height:40px; padding:10px; font-size:18px; }
</style>
</head>
<body>
<audio type="audio/mpeg" src="op.mp3"></audio>
<button id="btn_play">再生</button>
<button id="btn_pause">一時停止</button>
<p><time id="playback_position">0:30</time><input type="range" id="progress" value="0" min="0" step="1"><time id="end_position">1:24</time></p>
<script type="text/javascript">
window.onload = function() {
const btn_play = document.getElementById("btn_play");
const btn_pause = document.getElementById("btn_pause");
const playback_position = document.getElementById("playback_position");
const end_position = document.getElementById("end_position");
const slider_progress = document.getElementById("progress");
const audioElement = document.querySelector("audio");
var playtimer = null;
// 再生開始したときに実行
const startTimer = function(){
playtimer = setInterval(function(){
playback_position.textContent = convertTime(audioElement.currentTime);
slider_progress.value = Math.floor( (audioElement.currentTime / audioElement.duration) * audioElement.duration);
}, 500);
};
// 停止したときに実行
const stopTimer = function(){
clearInterval(playtimer);
playback_position.textContent = convertTime(audioElement.currentTime);
};
// 再生時間の表記を「mm:ss」に整える
const convertTime = function(time_position) {
time_position = Math.floor(time_position);
var res = null;
if( 60 <= time_position ) {
res = Math.floor(time_position / 60);
res += ":" + Math.floor(time_position % 60).toString().padStart( 2, '0');
} else {
res = "0:" + Math.floor(time_position % 60).toString().padStart( 2, '0');
}
return res;
};
// 音声ファイルの再生準備が整ったときに実行
audioElement.addEventListener('loadeddata', (e)=> {
slider_progress.max = audioElement.duration;
playback_position.textContent = convertTime(audioElement.currentTime);
end_position.textContent = convertTime(audioElement.duration);
});
// 音声ファイルが最後まで再生されたときに実行
audioElement.addEventListener("ended", e => {
stopTimer();
});
// 再生ボタンが押されたときに実行
btn_play.addEventListener("click", e => {
var time = 30
audioElement.currentTime=time;
audioElement.play();
startTimer();
});
// 一時停止ボタンが押されたときに実行
btn_pause.addEventListener("click", e => {
audioElement.pause();
stopTimer();
});
// プログレスバーが操作されたときに実行（メモリを動かしているとき）
slider_progress.addEventListener("input", e => {
stopTimer();
audioElement.currentTime = slider_progress.value;
});
// プログレスバーが操作完了したときに実行
slider_progress.addEventListener("change", e => {
startTimer();
});
};
</script>
</body>
</html>
