HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで動画・音声の音量が変更されるたびにスクリプトを実行する方法（onvolumechange属性）

onvolumechange属性とは

onvolumechange属性は、Webページ上で再生している動画（video）や音声（audio）の音量がユーザーによって変更されたタイミングでスクリプトを実行するためのイベント属性です。

このイベントは、音量を上げたとき・下げたときだけでなく、ミュート（消音）に切り替えた場合などにも発生します。音量操作に連動したUI表示やログ記録など、さまざまな場面で活用できます。

実装例

以下のコードを実行すると、onvolumechange属性の実際の動作を確認できます。動画の音量バーを操作すると、見出しのテキストが「音量が変更されました」に切り替わります。

<!DOCTYPE html>
<html>
   <body>
      <h2 id="test">再生</h2>
      <video id = "myid" width = "320" height = "176" controls onvolumechange = "myFunction()">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         お使いのブラウザはvideo要素をサポートしていません。
      </video>
      <script>
         function myFunction() {
         document.getElementById("test").innerHTML = "音量が変更されました";
         }
    </script>
   </body>
</html>

コードのポイント

  • <video>要素にonvolumechange = "myFunction()"を指定することで、音量変更時にmyFunction()が呼び出されます。
  • 関数内ではdocument.getElementById()を使って見出し要素を取得し、表示テキストを書き換えています。
  • 同様の処理は<audio>要素に対しても適用可能です。
  1. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実

  2. HTMLのonratechange属性で再生速度が変わるたびにスクリプトを実行する方法

    HTMLでは、onratechange属性を使用することで、動画や音声の再生速度が変更されるたびに指定したJavaScriptのスクリプトを実行できます。この属性は、ユーザーが再生速度を変更した瞬間を検知したい場合に非常に便利です。onratechange属性の基本的な使い方onratechange属性は、<video>要素や<audio>要素に設定でき、playbackRateプロパティの値が変化したタイミングでイベントが発生します。以下のコード例では、スライダー（レンジ入力）で動画の再生速度を変更すると、その都度現在の再生速度が画面に表示される仕組みを実装しています