#author("2020-02-02T17:38:56+09:00;2019-12-25T13:18:40+09:00","default:inoue.ko","inoue.ko")
*JavaScript|Audio
~
//RIGHT:
//[[WebDesign/JavaScript]]
//#clear
HTML + CSS + JavaScriptによるページのサンプルソースを紹介しています。
<AUDIO>タグで配置された音声の再生、停止、リセット等、JavaScriptからの制御はいたって簡単で、例えば ''要素のID.play(); ''と書けば再生、''要素のID.pause();'' と書けば一時停止することができます。
~
***事例 Audioの制御 [[→DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_Audio/]]
音声の再生、停止、リセット等、[[DOM>JavaScript/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';
}
~
~
~