用途
新着
履歴
分類


JS 音が出るボタン

JS 音が出るボタン
JS 音が出るボタン
ボタンを押すと音が出るサンプルです。

HTMLのaudioタグを使ったサンプルです。

下のボタンを押すと音がでます。

ピンポン

HTMLはこちら

<div id="demo_base">
    <div id="demo_btn">ピンポン</div>
</div>

<audio id="demo_sound" preload="auto">
    <source src="/sound/demo/click/003.mp3" type="audio/mp3">
</audio>
    

JavaScriptは以下になります。

    window.onload = () => {
        const se     = document.querySelector('#demo_sound');
        document.querySelector("#demo_btn").addEventListener("click", () => {
            se.play();
        });
    };

とてもシンプルに記述できます。

CSSもボタンが押された時の典型的な動きを付けています。

    #demo_base{
        position: relative;
        margin:20px auto;
        height:80px;
    }
    #demo_btn{
        cursor: pointer;
        border-radius: 30px;
        line-height: 60px;
        height: 60px;
        width: 60px;
        background-color: #3399CC;
        text-align: center;
        user-select: none;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
        color:#FFF;
        border:solid 2px #66BBEE;
        font-size:14px;
        margin:0px 0 0 0px;
        position: absolute;
    }

    #demo_btn:active{
        box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
        margin:2px 0 0 2px;
        transition: all 0.2s ease;
    }

公開 2020-02-27 22:09:39
更新 2020-02-27 22:18:20
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2020 kipure
Top