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'; }