audioタグを使用したクリック時に音が鳴るボタンの作り方

ユーザー体験を豊かにするための要素として、音が取り入れられているサイトやアプリケーションも徐々に増えてきました。

何らかのアクションに音を鳴らすことで、フィードバックが明快になり、サイトの雰囲気作りにも最適です。

今回は「audio」タグと簡単なJavaScriptを使用し、ボタンクリック時に効果音を鳴らす方法について解説します。

音が鳴るボタン *クリックすると音が鳴ります

エンターキー風のボタンを作り、キーボード押下時にも音を鳴らすように実装しています。

以下、実装方法です

効果音を選ぶ

https://soundeffect-lab.info/

効果音ラボから最適な効果音を選びダウンロードします。

リンクをクリックすると効果音を確認でき、リンク右にある「DL」ボタンをクリックするとmp3形式でファイルをダウンロードできます。

クレジット表記などが不要なのが嬉しいですね。再配布、アダルト利用は禁止されています。

ボタンとaudioタグを配置する

<button class="enter-key" id="enter">
    Enter
</button>
<audio id="click-sound" src="..."></audio>

ボタンタグとaudioタグをHTMLに記載します。

「audio」タグの「src」属性にはダウンロードしたaudioファイルを指定します。

ダウンロードしたaudioファイルをサーバーにアップロードしパスを指定して使用します。

ボタンをキーボードの「Enter」キーのスタイルにする

.enter-key {
    position: relative;
    width: 100px;
    height: 70px;
    background-color: #212121;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    box-shadow: -1px 1px 0 #434343, -2px 2px 0 #434343, -3px 3px 0 #434343, -4px 4px 0 #434343, -5px 5px 0 #434343;
    transition: all 0.3s;
    border-radius: 5px 5px 0px 5px;
}

.enter-key::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 60px;
    bottom: -60px;
    right: 0px;
    background-color: #212121;
    border-radius: 0 0 5px 5px;
    box-shadow: -1px 1px 0 #434343, -2px 2px 0 #434343, -3px 3px 0 #434343, -4px 4px 0 #434343, -5px 5px 0 #434343;
    transition: all 0.3s;
}

.enter-key:active,
.active {
    box-shadow: -1px 1px 0 #434343;
    transform: translate(-5px, 5px);
}

.enter-key:active::before,
.active::before {
    box-shadow: -1px 1px 0 #434343;
}

.enter-key:focus {
    outline: none;
}

「box-shadow」を入れ、「before」擬似要素で「Enter」ボタンの下側の四角を実装してます。

ボタンクリック時に押し込んだようなスタイルにするため「box-shadow: -1px 1px 0 #434343;」で影を減らしてます。

JavaScriptで効果音が鳴るように実装する

const enterKeyButton = document.getElementById('enter');
const clickSound = document.getElementById('click-sound');
// クリック時
enterKeyButton.addEventListener('click', function() {
    clickSound.currentTime = 0; 
    clickSound.play();
});

// エンターキーが押された時
document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        enterKeyButton.classList.add('active');
        clickSound.currentTime = 0; 
        clickSound.play();
    }
});

// エンターキーが離された時
document.addEventListener('keyup', function(event) {
    if (event.key === 'Enter') {
        enterKeyButton.classList.remove('active');
    }
});

「clickSound.play();」でaudioが再生されます。再生が終わるまで「play」メソッドは実行されないので、連続クリックした場合に対応できるよう「currentTime」プロパティに「0」を設定しています。