Tworzenie aplikacji RIA w Silverlight 5 - Współpraca z mediami 

Autor: Tomasz Kowalczyk

Opublikowano: 2012-08-27

Jest to piąta część cyklu, w której przedstawiane zostaną możliwości Silverlight 5. Z poniższego artykułu dowiesz się, jak bezpośrednio wykorzystywać media w aplikacji, wykonanej w Silverlight 5.

Po przeczytaniu poniższego artykułu będziesz wiedział, jak:

• dołączać pliki audio i wideo do swoich projektów,
• korzystać z bibliotek XNA, w celu odtwarzania dźwięków i korzystania z trybu Low Latency Sound,
• korzystać z komponentu MediaCommand, w celu sterowania odtwarzaniem plików wideo.

Wprowadzenie

W pewnego rodzaju oprogramowaniu, tj. aplikacjach typu KIOSK (aplikacje sterowane dotykiem, posiadające konkretną funkcjonalność, uruchamiane bezpośrednio po włączaniu urządzenia, na którym zostały zainstalowane), pożądane jest, aby móc odtwarzać dźwięk w odpowiedzi na akcje wywołane przez użytkownika.

W poprzednich wersjach Silverlight programiści zmuszeni byli do używania wszelkiego rodzaju sztuczek, aby osiągnąć efekt, podobny do opisanego powyżej (np. buforowany pre-loading komponentów MediaElement). W momencie pojawienia się Windows Phone, a wraz z nim pisania programów na to urządzenie z wykorzystaniem Silverlight, programiści otrzymali możliwość używania obiektów SoundEffect, pochodzących z bibliotek XNA. Silverlight 5 również posiada już tę opcję, co pozwala w łatwy sposób manipulować mediami.

Kolejną istotną cechą Silverlight 5 w dziedzinie obsługi mediów jest obsługaMediaCommand oraz możliwość korzystania ze zdalnych urządzeń sterujących (np. pilotów) do komunikacji pomiędzy użytkownikiem a aplikacją, wykonaną w technologii Silverlight 5. Użytkownicy laptopów lub osoby korzystające z multimedialnych klawiatur mają teraz możliwość użycia przycisków funkcyjnych, pozwalających np. na regulację głośności w celu interakcji z oprogramowaniem wykonanym w Silverlight 5 - Rys. 1. Multimedialna klawiatura Microsoft.

Rys. 1. Multimedialna klawiatura Microsoft.

Implementacja

W celu wyjaśnienia, w jaki sposób używać wyżej opisanych funkcji Silverlight 5, powstał przykładowy projekt, który składa się z dwóch podprojektów.

W pierwszym z nich przedstawiony został sposób odtwarzania dźwięków Low Latency Sound w postaci odegrania dźwięku wystrzału, który zostanie odtworzony po tym, jak użytkownik kliknie przyciskiem znajdującym się na ekranie.

Drugi projekt pokazuje, w jaki sposób korzystać z MediaCommand w celu sterowania odtwarzaniem pliku wideo, umieszczonego na stronie. Tak przygotowana aplikacja umożliwia użytkownikom obsługę za pomocą przycisków funkcyjnych, multimedialnych klawiatur lub wszelkiego rodzaju pilotów sterujących. W projekcie tym umieszczono również przycisk, którego kliknięcie powoduje wyświetlenie materiału wideo w trybie Full screen.

Informacja

Wszystkie kody źródłowe projektów, utworzonych w ramach artykułów, będą dostępne na tej stronie.

Po pobraniu i otwarciu projektu należy wybrać, który z podprojektów będzie aktywowany po uruchomieniu aplikacji. Aby to zrobić, należy kliknąć prawym przyciskiem myszy na projekt lls_media.Web i wybrać Properties, a następnie wybrać właściwy plik w formatce Specific page w zakładce Web, znajdującej się po lewej stronie, w sekcji Start action - Rys. 2. Wybór głównego projektu.

Rys. 2. Wybór głównego projektu.

Low Latency Sound

Po wybraniu pliku lls_mediaTestPage.aspx, projekt, który przedstawia, w jaki sposób odtwarzać pliki dźwiękowe w trybie Low Latency Sound, ustawiony zostanie jako uruchomieniowy. Umieszczona w pliku MainPage.xaml kontrolka Button odpowiada za odegranie odpowiedniego pliku po jej naciśnięciu:

<Button Content="Shot" Height="23" HorizontalAlignment="Left" Margin="163,67,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />

Aby było to możliwe, należy powołać obiekt typu SoundEffect. W zdarzeniu MainPage_Loaded, które zostanie wywoływane w momencie wczytywania się aplikacji, trzeba pobrać plik, który ma zostać odtworzony:

var laserStream =
              Application.GetResourceStream(new Uri("shot.wav", UriKind.RelativeOrAbsolute));
            _laserShotEffect = SoundEffect.FromStream(laserStream.Stream);

Następnie, w metodzie zdarzeniowej, uruchamianej po wciśnięciu przycisku, zostanie powołany obiekt SoundEffectInstance, a na nim uruchomiona metoda Play(), która odtworzy konkretny plik audio:

SoundEffectInstance instance = _laserShotEffect.CreateInstance();
            instance.Pitch = 1.0f;
            instance.Play();

MediaCommand

Po wybraniu pliku video_mediaTestPage.aspx, projekt, który przedstawia, w jaki sposób odtwarzać pliki wideo i sterować nimi z wykorzystaniem MediaCommand i urządzeń zewnętrznych, zostanie ustawiony jako uruchomieniowy. Plik MainPage.xaml składa się z trzech kontrolek, które odpowiadają za: wyświetlenie pliku wideo (MediaElement), przełączenie odtwarzanego pliku w tryb Full screen (Button) oraz wyświetlenie informacji (TextBlock) o statusie odtwarzanego pliku (Pause, Play):

<MediaElement x:Name="videoPlayer" Source="/Wildlife.wmv"/>
<TextBlock x:Name="txtMediaKey" Foreground="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,135,67" FontSize="20" />
<Button x:Name="FullScreen" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="Go Full Screen" Margin="5" Click="FullScreen_Click" />

Informacja

W pobranym repozytorium nie został umieszczony plik wideo, ze względu na rozmiary takich plików. Do katalogu z projektem video_media można przekopiować plik, znajdujący się na dysku twardym o rozszerzeniu *.wmv.

Następnie, w konstruktorze zostanie powołana metoda, mająca za zadanie przechwycić zdarzenie, wywoływane przez kontrolkę MediaElement:

this.MediaCommand += new MediaCommandEventHandler(MainPage_MediaCommand);

Po czym, w zależności od wybranego przez użytkownika trybu, w tej metodzie plik wideo będzie odtwarzany bądź chwilowo zatrzymywany:

switch (e.MediaCommand)
            {
                case System.Windows.Media.MediaCommand.Play:
                    videoPlayer.Play();
                    return;
                case System.Windows.Media.MediaCommand.Pause:
                    videoPlayer.Pause();
                    return;
                case System.Windows.Media.MediaCommand.Stop:
                    videoPlayer.Stop();
                    return;
            }

Efekt, tak przygotowanego programu, przedstawiono na Rys. 3 Odtwarzanie plików wideo. Można zaobserwować napisy świadczące o tym, że dany plik wideo został zatrzymany.

Rys. 3. Odtwarzanie plików wideo.

Podsumowanie

W tym artykule poznaliśmy możliwości Silverlight 5 w zakresie obsługi mediów. Wiemy, w jaki sposób odtwarzać dźwięki w odpowiedzi na zdarzenie wywołane przez użytkownika aplikacji. Nauczyliśmy się obsługiwać programowo zdarzenia, wywołane naszą aplikacją przez użytkownika, korzystającego np. z multimedialnej klawiatury.

W następnej części dowiemy się, jak pracować z tekstem z poziomu Silverlight 5.

 

---