Metro UI向けアプリを作るWinJSを利用した音声ファイル再生

Windows 8 Developer Preview が出て大分時間が経過したが、HTML5 + JavaScript でネイティブアプリの開発が可能な WinJS のTIPSをしようと考えている。今回は、WinJS を利用した音声ファイルの再生を紹介する。なお、今回の音声ファイルには MSDN > ホーム > クラウドガール > キャラクター利用ガイドライン、解説集のクラウディア・窓辺ボイスサンプルを利用させて頂いた。

音声ファイルの再生方法

WinJS は HTML5+JS で作成されるとはいえ、ネイティブアプリである。音声ファイルは専用の名前空間（私の妄想では WinRT.Media.Sound とか）が存在するのかと思ったが、HTML5 の仕様で策定されている

<audio id="my_sound" src="＜プロジェクトルートからの相対パス等、どっかのURI＞" autoplay loop />

サンプル

まず、Visual Studio 11を起動してWinJSプロジェクトを作成する。次に、プロジェクトルートに sound フォルダを作成し、クラウディア・窓辺ボイスサンプルから 01sahajimeru.wav ファイルを抜き出して同フォルダ内に配置した。下準備は完了したので、以下の様に記述することでWinRTを利用した音声ファイルの再生が可能になる。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024, height=768" />
    <title>WinWebApp1</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <script src="/winjs/js/ui.js"></script>
    <script src="/winjs/js/controls.js"></script>
    <!-- WinWebApp1 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div data-win-control="WinJS.UI.ViewBox">
        <div class="fixed-layout">
            <div>
                <audio id="my_sound" src="sound/01sahajimeru.wav">
                </audio>
            </div>
            <input type="button" value="開始" onclick="document.getElementById('my_sound').play();">
        </div>
    </div>
</body>
</html>