【HTML】【javascript】audioタグの設定と、javascriptでオーディオを操作する方法

投稿日 : 2022年04月19日 更新日 :

【HTML】audioタグ

src属性	音声ファイルを指定する
preload属性	auto	ファイル全体を事前に読み込むようにする。
	none	ファイル全体を事前に読み込まないようにする。
	metadata	音声のメタデータ(長さやファイルサイズ)の情報のみ読み込むようにする。
autoplay属性	音声を自動再生する	※ ページを読み込み時に自動再生させることはできない。クリックやマウスオーバーイベントが必要。
loop属性	ループ再生を指定する
controls属性	コントローラーを表示する

例

 <audio src="mp3のパス" preload="metadata" autoplay loop controls></audio>

javascriptでオーディオを操作

 <audio src="mp3のパス" id="media"></audio>
        
  <script>
    const audio = document.getElementById("media");
  </script>

再生&停止

再生

  <button onclick="play()">再生</button>    

  <script>
    function play() {
      audio.play();
    }  
  </script>

再生

一時停止

  <button onclick="pause()">一時停止</button>    

  <script>
    function pause() {
      audio.pause();
    }  
  </script>

停止&最初から

  <button onclick="currentTime_start()">停止&最初から</button>    
  
  <script>
    function currentTime_start() {
      audio.pause();
      audio.currentTime = 0;
    } 
  </script>

再生 一時停止 停止&最初から

音量

音量アップ&ダウン、ミュート

  <button onclick="volume_up()">音量アップ</button>
  <button onclick="volume_down()">音量ダウン</button>
  <button onclick="muted()">ミュート</button>    
  
  <script>
    function volume_up() {
      audio.volume = audio.volume + 0.1; //音量の値を0.1(10%)ずつアップ
    }

    function volume_down() {
      audio.volume = audio.volume - 0.1; //音量の値を0.1(10%)ずつダウン
    }

    function muted() {
      if(audio.muted == true){
        audio.muted = false;
      } else {
        audio.muted = true;
      }
    }
  </script>

再生 音量アップ 音量ダウン ミュート

連続再生loop

  <button onclick="loop()">連続再生</button>    
  
  <script>
    function loop() {
      if(audio.loop == true){
        audio.loop = false;
      } else {
        audio.loop = true;
      }
    }
  </script>

再生 連続再生

コントローラーの表示／非表示

  <button onclick="controls()">コントローラーの表示／非表示</button>    
  
  <script>
    function controls() {
      if(audio.controls == true){
        audio.controls = false;
      } else {
        audio.controls = true;
      }
    }
  </script>

コントローラーの表示／非表示

ファイルの長さを取得

  console.log(audio.duration)

コントローラーを自作

まとめ