HTML 5 Audio

オーディオ再生。

テスト用mp3 ： ブギーポップの口笛でも使われるワーグナー作曲「ニュルンベルクのマイスタージンガー第1幕への前奏曲」

「僕は自動的なんだよ。」

API チェッカー

view source

JavaScript

  var audio = new Audio('wagner.mp3');

  //コメント外すと自動再生
  //audio.play();

//イベントに対応して操作
$(function(){
  $('#audio_play').click(function(){
    audio.play();
  });
  $('#audio_pause').click(function(){
    audio.pause();
  });
  $('#audio_volume_restart').click(function(){
    audio.currentTime = 0;
    audio.play();
  });
  $('#audio_volume_minus').click(function(){
    audio.volume = audio.volume - 0.2;
  });
  $('#audio_volume_plus').click(function(){
    audio.volume = audio.volume + 0.2;
  });

  //再生位置の監視
  audio.addEventListener('timeupdate', function(){
    $('#time').text(audio.currentTime + '/' + audio.duration);
  });
});

CSS

#result{
  padding:12px;
  background-color:#dddddd;
}
#code, #code2{
  border:1px solid #000000;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-html5/html5-audio/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。