HTMLのvideoタグに任意の音声切り替えボタンを設置する方法

2023年6月23日

masu

HTMLにvideoタグで動画を埋め込んだ場合に、コントロールパネルでなく独自のボタンを設置して音声のオン/オフを切り替える方法をご紹介します。

videoタグに任意の音声切り替えボタンを設置した例

今回やりたいことはこちらです。

デモページ

「音声をオンにする」のボタンをクリックすると、風の音と虫の声が聞こえ、ミュートが解除されるのが確認できるかと思います。

仕様は以下の通りです。

仕様

動画が自動再生されている。
最初は音声がミュートになっている。
音声切換ボタンを押すと、ミュートが解除される。
ボタンのテキストが「音声をオンにする」から「音声をオフにする」へと変わる。

コードの見本

コードの見本がこちらです。style.cssやscript.jsの読み込みは省略させていただきます。

<div class="movie"><video class="js-video" src="movie/sky.mp4" autoplay muted></video></div>
<div class="movie__btn"><button class="js-video-button">音声をオンにする</button></div>

/* 動画の縦横比を意地 */
.movie {
  margin: 100px 0 0;
  width: 100%;
  position: relative;
}

.movie::before {
  padding-top: 65%;
  display: block;
  content: "";
}

.movie video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.movie__btn {
  margin-top: 1em;
  text-align: center;
}

.movie__btn button {
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  padding: 0.5em 1em;
  border-radius: 50px;
  box-shadow: initial;
  display: inline-block;
  appearance: none;
  border: 1px solid #333;
  background-color: initial;
  cursor: pointer;
}

// videoタグとbuttonタグを変数に格納
const video = document.querySelector(".js-video");
const videoButton = document.querySelector(".js-video-button");

// mutedを操作する関数を定義
const toggleAudio = () => {
    video.muted = !video.muted;;
}

videoButton.addEventListener('click', () => {
    // 関数を実行
    toggleAudio();

    // テキストを操作
    if (videoButton.textContent === '音声をオンにする') {
        videoButton.textContent = '音声をオフにする';
    } else {
        videoButton.textContent = '音声をオンにする';
    }
});

WAI-ARIAによるスクリーンリーダーへは対応していません。実務では必要に応じて、スクリーンリーダーへの対応を強化するため正しくWAI-ARIAを設定しましょう。

コードの解説

重要なところを抜粋して解説いたします。

videoタグの属性を設定

<video class="js-video" src="movie/sky.mp4" autoplay muted></video>

ページの読み込みと同時に動画を再生したいので、videoタグにautoplay属性をつけています。また最初は音声をミュートにしたいので、muted属性をつけています。

属性をコントロールする関数を定義

// muted属性を操作する関数を定義
const toggleAudio = () => {
    video.muted = !video.muted;;
}

videoタグにmuted属性がなければmutedをつけて、muted属性が存在すればmutedを外す関数を定義しています。

ボタンをクリックした時の処理を指定

videoButton.addEventListener('click', () => {
    // 関数を実行
    toggleAudio();

    // テキストを操作
    if (videoButton.textContent === '音声をオンにする') {
        videoButton.textContent = '音声をオフにする';
    } else {
        videoButton.textContent = '音声をオンにする';
    }
});

ボタンをクリックすると、