HTML5でマリオのコインとTVの放送停止画面の音がブラウザで出るもの作ってみたよ

きっかけ

弊社で開発しているライブ配信システムに「TVでよく見かける放送のテストパターンを出したら面白いかなぁ？」と思ったのがきっかけです。

結果ページ

• コインページ(他色々あるので?マークを押してみてください)

• TVカラーテスト(ulタグ音声なし)

• TVカラーテスト(divタグ音声あり、画面をクリックすると音がなります)

• TVカラーテスト(svgタグ音声あり、画面をクリックすると音がなります)

はい、こんな感じでブラウザだけで音声ファイルもなしで、javascriptのAudioContextで生成できる音だけを使って色々なサンプルを動かすことができます。

HTMLが分かる方はブラウザでソースを表示してみると意味が分かると思います。（コインページはtableタグだけでドット絵を表現しています。）

ちょっとだけ解説

まず、音ではなく画面の方ですが前述した通り、コインページはtableタグだけでドット絵を表現しています。
例えばコインのドット絵の場合、横が10列縦が12行のtableタグを書きます。

tableタグで表現したコイン

<style>
table{border-spacing:0;}
td{width:16px;height:16px;}
</style>
<table>
<tr>
    <td></td>
    <!--↑のtdを9個コピペ-->
</tr>
<!--↑このtrのブロックを11個コピーする-->
</table>

cssも使わずにやりたい方は

<table cellspacing="0">
<tr>
    <td>&nbsp;&nbsp;</td>
    <!--↑のtdを9個コピペ-->
</tr>
<!--↑このtrのブロックを11個コピーする-->
</table>

あとは、これにrgb値を入れていきます。(htmlのみでやりたい方はbgcolor、cssのclassを使いたい方はbackgroundcolorを使ってください。)

<table>
<tr>
    <td></td><td></td>
    <td bgcolor="#ffc65f"></td>
    <td bgcolor="#ffc65f"></td>
    <td bgcolor="#ffc65f"></td>
    <td bgcolor="#ffc65f"></td>
    <td bgcolor="#000"></td>
    <td bgcolor="#000"></td>
    <td></td><td></td>
</tr>
<!--以下略-->
</table>

※本来、HTMLではこういう使い方をしません。
サンプルとして↓途中までのをおいておきます。

coin.html

1.9 KB

ファイルダウンロードについて

ダウンロード

また、TVカラーテストのページはcssのcalcを使いulタグやdivタグだけでやったり、svgタグでやったりしています。

音声の方の技術的なことはqiitaの方に記載してますが、JavaScriptでAudioContextというものを使えば、TVの放送禁止音などの「ピー」という音を生成することができます。
そこに音階をつけるだけで色々音楽を生成できるわけです。

結局失敗に終わる

ソースの汚さとか置いておいて、この思いつきは失敗に終わりました。

理由は、chromeがユーザーの行動（例えばクリックとか）をなしにいきなり音声を再生することをNGとしているからです。(回避方法はあるけど警告を無視するのはよくないです。)
確かに、いきなり大音量を流されて高いスピーカーやヘッドフォンや耳を壊したり、フィッシングサイト系のにひっかかってリダイレクトした先で公序良俗に反するような音声がいきなり再生されたらたまったもんじゃないですからね。

UXが重視されるようになって久しいですが、こういうのも失敗して分かることも勉強の1つだなぁと思います。

何が言いたいか？

新年度を迎えこれからIT業界に身を置くことになる方は、こういうバカバカしさを忘れないでほしいです。
私がHTMLを書き始めた2000年代前半、tableタグはブラウザのレンダリング速度が遅くなるので使うのがNGな時代がありましたし、今回の音の生成に使ったAudioContext使えない時代もありました… ただ、技術は発展していきます。

その技術も「○○できたらなぁ〜」というアイディアがあった上で発展してきます。
少し技術力がついたりすると技術力ありきなったりしますが、それ以上にアイディアを大事にしてください。

IT業界は昨日まで常識と言われていたものが禁止になったり、一般的には忌避と言われている技術でも使わなければいけない場面も出てくるかもしれません、その時「正攻法しかしらない、使えない」「ダメな理由を知らない」のはもったいないと思います。
今回のようにサーバーサイドができない、ローカルでサーバーを立てなくても、cssが書けなくても、HTMLだけで面白いことできます。

古い言語・技術だからなど関係なく、色々な技術を沢山吸収してよりよいものを開発していきましょう！