読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

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

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

ソース

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