みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです！

イエローカードに音を加えてみる

つくったもの

以前つくった イエローカード にさらに改良を加え、画面をタップした際にホイッスルっぽい音を出すことにしてみました。

ソース

HTML

<style>
    html, body {
        margin: 0; padding: 0;
        height: 100%;
    }
    #card {
        width: 100%; height: 100%;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffee61), color-stop(0.2, #f4dd1b), to(#f4dd1b));
    }
</style>
<body>
    <div id="card"></div>
    <script>
        var audio = new Audio("whistle.mp3");
        document.querySelector("title").innerText = "Yellow";
        document.querySelector("#card").addEventListener("click", function() {
            audio.load();
            audio.play();
        }, false);
    </script>
</body>

マニフェストファイル

CACHE MANIFEST
# 2013-06-29:0.0.3

CACHE:
index.html
appicon.png
favicon.ico
whistle.mp3

デモ

http://yellowcard.kimizuka.fm
http://redcard.kimizuka.fm