LogoMark.png

JavaScript/Audio

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






PAGES

GUIDE

TOOL

DATA

Last-modified: 2020-02-02 (日) 17:38:56