Multimedia w WPF — odtwarzanie audio i wideo

Po co się tego uczymy?

Niektóre zadania egzaminacyjne i realne aplikacje (odtwarzacz muzyki, prezentacja multimedialna, aplikacja szkoleniowa) wymagają odtwarzania dźwięku lub wideo. WPF ma do tego wbudowaną, gotową kontrolkę — nie trzeba żadnych dodatkowych bibliotek. Ważna uwaga na start: na egzaminie zwykle NIE MA internetu, więc pliki multimedialne muszą być dołączone bezpośrednio do projektu, a nie pobierane z sieci.

Teoria

Kontrolka MediaElement potrafi odtwarzać zarówno pliki audio, jak i wideo — WPF sam rozpoznaje typ na podstawie rozszerzenia pliku. Najważniejsze właściwości i metody: Source (ścieżka do pliku), Play(), Pause(), Stop() (sterowanie odtwarzaniem), Volume (głośność od 0 do 1), Position (aktualna pozycja odtwarzania jako TimeSpan).

Dodawanie plików multimedialnych do projektu (kluczowe na egzaminie, gdzie nie ma internetu): kliknij prawym przyciskiem na projekt → Dodaj → Istniejący element, i wskaż plik audio/wideo. Dla KAŻDEGO takiego pliku trzeba ustawić w jego właściwościach (panel Właściwości w Visual Studio po zaznaczeniu pliku): Build Action → Content oraz Copy to Output Directory → Copy always. Bez tego plik nie znajdzie się w folderze z gotową aplikacją i program go nie znajdzie przy uruchomieniu.

Domyślnie MediaElement zaczyna odtwarzanie automatycznie po załadowaniu — żeby to zmienić, ustaw LoadedBehavior="Manual", co pozwala sterować odtwarzaniem ręcznie przez przyciski Play/Pause/Stop podpięte pod metody w code-behind.

Przykład z życia

Aplikacja do nauki języka obcego może odtwarzać krótkie nagrania wymowy słówek po kliknięciu przycisku "Odsłuchaj", a program prezentacyjny w muzeum może odtwarzać krótkie filmy instruktażowe przypisane do wybranego eksponatu z listy — w obu przypadkach pliki multimedialne są dołączone do aplikacji i działają całkowicie offline, bez potrzeby połączenia z internetem.

Kod (XAML)

<!-- MainWindow.xaml -->
<Window x:Class="AVWpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Odtwarzacz" Height="300" Width="450">
    <StackPanel Margin="20">
        <MediaElement x:Name="Odtwarzacz"
                      Source="Media/Video/prezentacja.mp4"
                      LoadedBehavior="Manual"
                      Height="180" />

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
            <Button Content="Play" Width="80" Margin="5" Click="Play_Click" />
            <Button Content="Pauza" Width="80" Margin="5" Click="Pauza_Click" />
            <Button Content="Stop" Width="80" Margin="5" Click="Stop_Click" />
        </StackPanel>

        <Slider x:Name="SuwakGlosnosci" Minimum="0" Maximum="1" Value="0.5"
                ValueChanged="SuwakGlosnosci_ValueChanged" Margin="0,10,0,0" />
    </StackPanel>
</Window>

Komentarz i wyjaśnienie kodu

MediaElement ma ustawioną ścieżkę Source="Media/Video/prezentacja.mp4" — to ścieżka WZGLĘDNA wewnątrz folderu z aplikacją, dlatego tak ważne jest ustawienie Copy to Output Directory na plikach, żeby ta ścieżka faktycznie istniała po zbudowaniu programu. LoadedBehavior="Manual" wyłącza automatyczne odtwarzanie i pozwala sterować nim ręcznie z kodu.

W code-behind (nie pokazany powyżej, ale prosty): metoda Play_Click wywołuje Odtwarzacz.Play(), Pauza_Click wywołuje Odtwarzacz.Pause(), Stop_Click wywołuje Odtwarzacz.Stop(), a SuwakGlosnosci_ValueChanged ustawia Odtwarzacz.Volume = SuwakGlosnosci.Value — sterowanie głośnością suwakiem od 0 (cisza) do 1 (pełna głośność).

Ćwiczenie samodzielne

Utwórz nowy projekt WPF, dodaj do niego dowolny krótki plik wideo (pamiętając o ustawieniu Copy to Output Directory), wklej powyższy XAML (dostosowując ścieżkę), i dopisz w code-behind trzy proste metody obsługi przycisków Play/Pauza/Stop.

Zadania do pracy własnej

Dodaj etykietę pokazującą aktualną pozycję odtwarzania (Odtwarzacz.Position) aktualizowaną co sekundę (podpowiedź: użyj DispatcherTimer).
Zbuduj odtwarzacz z listą kilku plików audio (ListBox) — kliknięcie pozycji na liście powinno zmienić Odtwarzacz.Source na wybrany plik i automatycznie rozpocząć odtwarzanie.
Zbuduj aplikację z dwiema sekcjami (audio i wideo) każda z własną listą plików i własnymi przyciskami sterującymi, dokładnie jak w pomyśle z backupu — dwa niezależne obiekty MediaElement działające jednocześnie, każdy sterowany osobnym zestawem przycisków.

Typowe błędy

Zapomnienie o Copy to Output Directory — to zdecydowanie najczęstszy błąd: aplikacja kompiluje się bez problemu, ale przy próbie odtworzenia zgłasza błąd "nie znaleziono pliku", bo plik multimedialny nigdy nie trafił do folderu z gotową aplikacją.

Używanie ścieżek bezwzględnych (np. C:Users...wideo.mp4) zamiast względnych — zadziała na Twoim komputerze, ale nie zadziała na komputerze egzaminacyjnym ani u nikogo innego, kto uruchomi program.

Brak LoadedBehavior="Manual", gdy chcemy sterować odtwarzaniem ręcznie — bez tego plik zacznie się odtwarzać automatycznie od razu po otwarciu okna, zanim użytkownik kliknie cokolwiek.

Nawiązanie do egzaminu zawodowego

To rozszerzenie INF.04.5.3 o obsługę multimediów w interfejsie aplikacji desktopowej — temat rzadziej spotykany na egzaminie niż formularze czy listy danych, ale czasem pojawia się w zadaniach dotyczących aplikacji prezentacyjnych czy edukacyjnych.