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

割と普通なブログ

Microsoft Azure や ASP.NET、Java EE 系の話題を記載します

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

JavaScript 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>

タグ内でWinRT用の共通ライブラリが色々読み込まれているが、原則的に HTML5 のWebアプリケーションとなんら変わりない方法で音声ファイルが再生されることが分かると思う。是非、各位も存分にクラウディア様に叱責されればよいだろう。