システムメディアトランスポートコントロールの使用方法 (HTML)

[アーティクル]
02/12/2016

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

SystemMediaTransportControls クラスは、Windows によって提供されるシステムメディアトランスポートコントロールをアプリで使用できるようにし、表示されるメディア情報を更新します。

完全なメディア再生のサンプルで実際にこの機能を確認するには、「メディア再生の概要」を参照してください。

概要

Windows 8.1 で導入された SystemMediaTransportControls クラスは、前の MediaControl クラスに代わるものです。新しい SystemMediaTransportControls を、MediaControl の代わりに使ってください。

システムトランスポートコントロールは、audio または video オブジェクトのトランスポートコントロールとは異なります。システムトランスポートコントロールは、ヘッドホンのボリュームコントロールやキーボードのメディアボタンなどのハードウェアメディアキーを押すとポップアップするコントロールです。ユーザーがキーボードの一時停止キーを押し、アプリが SystemMediaTransportControls をサポートしている場合、アプリは通知を受け取り、ユーザーは適切なアクションを実行できます。

アプリでは、SystemMediaTransportControls に表示される曲のタイトル、サムネイル画像などのメディア情報も更新できます。

トランスポートコントロールの設定

SystemMediaTransportControls のインスタンスを取得するには、getForCurrentView を呼び出します。

アプリで処理するボタンを有効にするには、対応する SystemMediaTransportControls オブジェクトの "is enabled" プロパティ (isPlayEnabled、isPauseEnabled、isNextEnabled、isPreviousEnabled など) を設定します。全一覧については、SystemMediaTransportControls のリファレンスドキュメントをご覧ください。

paused、playing、ended の各イベントのイベントハンドラーを持つ video オブジェクトを作成し、SystemMediaTransportControls を設定するコードを次に示します。このコードにより、再生ボタンと一時停止ボタンを有効にし、buttonpressed イベントのイベントハンドラーを追加します。paused、playing、ended の各イベントハンドラーについては、この例で後述します。

<video id="mediaVideo" 
       controls 
       src="https://www.contoso.com/clip.mp4"
       onpause="mediaPaused(event)"
       onplaying="mediaPlaying(event)"
       onended="mediaEnded(event)" />

var systemMediaControls;

systemMediaControls = Windows.Media.SystemMediaTransportControls.getForCurrentView();

systemMediaControls.addEventListener("buttonpressed", systemMediaControlsButtonPressed, false);

systemMediaControls.isPlayEnabled = true;
systemMediaControls.isPauseEnabled = true;
systemMediaControls.isStopEnabled = true;

systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.closed;

トランスポートコントロールとの通信

トランスポートコントロールを使う場合は、3 つの通信要素があります。

SystemMediaTransportControls は、有効なボタンの 1 つが押されたときに buttonpressed イベントを介してアプリに通知します。アプリは、押されたボタンに応答して、一時停止、再生など、メディアを制御します。

アプリは、メディアの状態が変更されたときに SystemMediaTransportControls.playbackStatus プロパティを介して SystemMediaTransportControls に通知します。これによりトランスポートコントロールでメディアソースの状態に合わせてボタンの状態を更新することができます。

SystemMediaTransportControlsDisplayUpdater で、曲のタイトルやアルバムアートなど、トランスポートコントロールに表示されるメディア情報を更新できます。

ボタン入力の処理

buttonpressed イベントは、有効なボタンの 1 つが押されたときにシステムトランスポートコントロールで発生します。 button プロパティのイベント引数は、どのボタンが押されたかを特定します。

video の再生と一時停止を行うヘルパーメソッドと buttonpressed イベントハンドラーを作成するコードを次に示します。

// Event handler for SystemMediaTransportControls' buttonpressed event
function systemMediaControlsButtonPressed(eventIn) {

    var mediaButton = Windows.Media.SystemMediaTransportControlsButton;

    switch (eventIn.button) {
        case mediaButton.play:
            playMedia();
            break;

        case mediaButton.pause:
            pauseMedia();
            break;

        case mediaButton.stop:
            stopMedia();
            break;

        // Insert additional case statements for other buttons you want to handle
    }
}

// Plays the media.
function playMedia() {
    var media = document.getElementById("mediaVideo");
    media.play();
}

// Pauses the media.
function pauseMedia() {
    var media = document.getElementById("mediaVideo");
    media.pause();
}

// Stops the media.
function stopMedia() {
    var media = document.getElementById("mediaVideo");
    media.pause();
    media.currentTime = 0;
}

メディアの状態の更新

メディアの状態が変更されたことを SystemMediaTransportControls に通知するには、playbackStatus を適切な MediaPlaybackStatus の値に設定します。

メディアイベントを処理し、SystemMediaTransportControls の playbackStatus プロパティを更新するコードを次に示します。

// The media Play event handler.
function mediaPlaying() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.playing;
}

// The media Pause event handler.
function mediaPaused() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.paused;
}

// The media Ended event handler.
function mediaEnded() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.stopped;
}

メディア情報とサムネイルの更新

SystemMediaTransportControlsDisplayUpdater クラスを使って、曲のタイトルやアルバムアートなど、トランスポートコントロールに表示されるメディア情報を更新します。

displayUpdater プロパティは SystemMediaTransportControls に関連付けられている SystemMediaTransportControlsDisplayUpdater です。

musicProperties、imageProperties、videoProperties のメディアプロパティを設定して、メタデータを手動で更新できます。ただし、ファイルからメタデータとサムネイルイメージを自動的に抽出する copyFromFileAsync メソッドにメディアファイルを渡す方がはるかに簡単でありお勧めです。

表示するすべてのメディア情報を設定している場合、update を呼び出します。UI は、update が呼び出されるまで更新されません。

Windows.Storage.StorageFile と Windows.Storage.Streams.RandomAccessStreamReference は、メディア情報の操作に便利な静的メソッドを提供します。

StorageFile

RandomAccessStreamReference

Windows: バックグラウンドオーディオ

Windows でオーディオをバックグラウンドで再生するには、アプリでは、isPlayEnabled と isPauseEnabled を true に設定して、再生ボタンと一時停止ボタンを有効にする必要があります。アプリは、buttonpressed イベントも処理する必要があります。Windows でバックグラウンドでオーディオを再生するためのすべての要件について詳しくは、「バックグラウンドでオーディオを再生する方法」をご覧ください。

システム メディア トランスポート コントロールの使用方法 (HTML)

概要

トランスポート コントロールの設定

トランスポート コントロールとの通信