JavaScript｜Audio
HTML + CSS + JavaScriptによるページのサンプルソースを紹介しています。
＜AUDIO＞タグで配置された音声の再生、停止、リセット等、JavaScriptからの制御はいたって簡単で、例えば 要素のID.play(); と書けば再生、要素のID.pause(); と書けば一時停止することができます。
事例 Audioの制御 →DEMO
音声の再生、停止、リセット等、DOMを使って記述しています。
index.html ｜ ページの文書構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Basic Sample</title>
<script type="text/javascript" src="sample.js"></script>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<Audio id="myAudio" src="sample.mp3" autoplay loop></audio>
<button id="Play">play</button>
<button id="Pause">pause</button>
<button id="Reset">reset</button>
<button id="Mute">mute</button>
<button id="CurrentTime"></button>
</body>
</html>
sample.css
省略
sample.js
window.onload = function(){
document.getElementById("Play").addEventListener("click", Play, false);
document.getElementById("Pause").addEventListener("click", Pause, false);
document.getElementById("Reset").addEventListener("click", Reset, false);
document.getElementById("Mute").addEventListener("click", Mute, false);
document.getElementById("myAudio").addEventListener("timeupdate", TimeUpdate, true);
}
function Play(){
var audioSource = document.getElementById("myAudio")
audioSource.play();
}
function Pause(){
var audioSource = document.getElementById("myAudio")
audioSource.pause();
}
function Reset(){
var audioSource = document.getElementById("myAudio")
audioSource.pause();
audioSource.currentTime = 0;
}
function Mute(){
var audioSource = document.getElementById("myAudio")
if(audioSource.muted){
audioSource.muted = false;
}else{
audioSource.muted = true;
}
}
function TimeUpdate() {
var audioSource = document.getElementById("myAudio")
var t = Math.floor(audioSource.currentTime);
document.getElementById('CurrentTime').innerHTML = t + 's';
}