LogoMark.png

JavaScript/Audio の変更点

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