次の方法で共有

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

  • [アーティクル]

[ この記事は、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 でバックグラウンドでオーディオを再生するためのすべての要件について詳しくは、「バックグラウンドでオーディオを再生する方法」をご覧ください。