ホームページで音を鳴らす

ホームページ黎明期、開くとMIDIなど音楽が流れだすホームページをよく見かけました。割と嫌われる傾向があったようですが・・

最近はHTML5で実装するケースが多いようで、ちょっとしたアクセントにはいいかもしれません。

サンプル1 サンプル2
※サンプルは音が出ますので音量注意です。

Javascript

function PlaySound() {
  document.getElementById("onSound").play();
}

HTML

    <div id="contents">
      <input type="button" value="♪音を鳴らす" onclick="PlaySound()">
    </div>
    <audio id="onSound" preload="auto">
        <source src="sound/ka.mp3" type="audio/mp3">
        <source src="sound/ka.ogg" type="audio/ogg">
        <source src="sound/ka.wav" type="audio/wav">
        <p>お使いのブラウザは音が鳴りません。</p>
    </audio>

複数の音源があるのは、ブラウザやデバイス間で対応出来る形式が違う事を許容する為のようです。音源の変換はこちらが便利です。

これはaudioですが

<video src="xxx.mp4"></video> 

といった感じで動画も再生出来ます。

なんで今さらこんな記事をって感じなのですが、チャットで呼び出しコールは可能か？って考察の為に色々と考えた時に作ったサンプルをせっかくなので・・・という経緯です。新着があれば音を鳴らす、或いはログファイルに非可視のトリガーを書き込んで、ログチェックのときに音を鳴らす、といった形で実現は可能そうですね。