WPFとNAudioで音楽プレイヤーを作る～第5回：フォルダ内の楽曲を読み込んでListViewに表示させる～

株式会社シャフト

第5回：フォルダ内の楽曲を読み込んでListViewに表示させる


今回のポイント

  • TagLibで音楽の情報を読み取る

  • NotifyPropertyChangedメソッドでViewに変更を通知する

TagLibを導入する

mp3ファイルに書き込まれた情報を読み取るためにTagLibを使用します。
プロジェクト > NuGetパッケージの管理 から TagLibSharp と検索してインストールするだけです。
下側のものをインストールしました。なんか他にもいろいろ種類があったんですがまあいいでしょう。

フォルダ内の楽曲を読み込む

今回は起動時に特定のフォルダのmp3ファイルを探索してListViewに表示するようにしたいと思います。
まずはCommonフォルダ配下にMusic.csファイルを作成します。

Musicクラスには6つのプロパティがあります。

Music.cs

using System;

namespace MusicPlayer.MVVM.Common
{
    public class Music
    {
        /// <summary>
        /// 音楽ファイルの絶対パス
        /// </summary>
        public string Path { get; set; }

        /// <summary>
        /// タイトル
        /// </summary>
        public string? Title { get; set; }

        /// <summary>
        /// アーティスト名
        /// </summary>
        public string? Artist { get; set; }

        /// <summary>
        /// アルバム名
        /// </summary>
        public string? Album { get; set; }

        /// <summary>
        /// 曲の長さ
        /// </summary>
        public TimeSpan Time { get; set; }

        /// <summary>
        /// トラック番号
        /// </summary>
        public uint Track { get; set; }

    }
}

次にModelフォルダの配下にMainWindowModel.csファイルを作成します。

MainWindowModel.cs

using MusicPlayer.MVVM.Common;
using System;
using System.Collections.Generic;

namespace MusicPlayer.MVVM.Model
{
    public class MainWindowModel
    {
        /// <summary>
        /// 音楽ファイルの読込処理
        /// </summary>
        public List<Music> LoadMusicFiles()
        {
            // MUSIC配下のmp3ファイルのパスを全取得
            string[] filePaths = System.IO.Directory.GetFiles(@"C:\ユーザー名\Music\MUSIC", "*.mp3", System.IO.SearchOption.AllDirectories);

            // 音楽の情報を読み込んでリストに入れる
            List<Music> musicList = new List<Music>();
            foreach (string filePath in filePaths)
            {
                TagLib.File file = TagLib.File.Create(filePath);
                Music music = new Music()
                {
                    Path = filePath,
                    Title = file.Tag.Title,
                    Album = file.Tag.Album,
                    Artist = file.Tag.Performers[0],
                    Track = file.Tag.Track,
                    Time = new TimeSpan(0, 0, file.Properties.Duration.Minutes, file.Properties.Duration.Seconds),
                };
                musicList.Add(music);
            }

            return musicList.OrderBy(m => m.Album)
                           .ThenBy(m => m.Track)
                           .ToList();

        }
    }
}

LoadMusicFilesメソッドではまず指定したフォルダ配下のmp3ファイルを探索します。
System.IO.Directory.GetFilesメソッドの第一引数に探索したいディレクトリ、第二引数には探索するファイルの拡張子を指定します。
今回はマイミュージックフォルダ配下にMUSICフォルダを作成してその中にmp3ファイルを配置しています。
第三引数にSystem.IO.SearchOption.AllDirectoriesを指定するとサブフォルダ内も探索してくれます。
探索が完了するとfilePaths変数にファイルの完全パスが格納されます。

// MUSIC配下のmp3ファイルのパスを全取得
string[] filePaths = System.IO.Directory.GetFiles(@"C:\ユーザー名\Music\MUSIC", "*.mp3", System.IO.SearchOption.AllDirectories);

完全パスが取得できたら先程作成した`Music`クラスのリストを作成します。
TagLib.File file = TagLib.File.Create(filePath);で一曲分の情報を読み込みます。
読み込んだ情報から`Music`クラスの各プロパティを設定しつつオブジェクトを作成します。

// 音楽の情報を読み込んでリストに入れる
List<Music> musicList = new List<Music>();
foreach (string filePath in filePaths)
{
    TagLib.File file = TagLib.File.Create(filePath);
    Music music = new Music()
    {
        Path = filePath,
        Title = file.Tag.Title,
        Album = file.Tag.Album,
        Artist = file.Tag.Performers[0],
        Track = file.Tag.Track,
        Time = new TimeSpan(0, 0, file.Properties.Duration.Minutes, file.Properties.Duration.Seconds),
    };
    musicList.Add(music);
}

最後にmusicListをLINQで並び替えてから返却しています。

return musicList.OrderBy(m => m.Album)
                .ThenBy(m => m.Track)
                .ToList();

起動時に音楽ファイルを読み込む

MainWindowModelに作成したLoadMusicFilesメソッドを起動時に呼ぶためにMainWindowViewModelのコンストラクタを修正します。

MainWindowViewModel.cs

using MusicPlayer.MVVM.Common;
using MusicPlayer.MVVM.Model;
using NAudio.Wave;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows.Forms;
using System.Windows.Input;

namespace MusicPlayer.MVVM.ViewModel
{
    class MainWindowViewModel : INotifyPropertyChanged
    {
        // 変数の更新通知用
        public event PropertyChangedEventHandler PropertyChanged;

        private MainWindowModel _model = new MainWindowModel();

        // 音楽の一覧
        private List<Music> _musicList;
        public List<Music> MusicList
        {
            get { return this._musicList; }
            set 
            { 
                this._musicList = value;
                NotifyPropertyChanged("MusicList");
            }
        }

        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(info));
        }

        /// <summary>再生ボタンが押されたときのコマンド</summary>
        public ICommand OnPlayButtonClickCommand { get; set; }

        /// <summary>
        /// コンストラクタ
        /// </summary>
        public MainWindowViewModel() 
        {
            // フォルダ内の音楽の読込
            MusicList = this._model.LoadMusicFiles();
            // 再生ボタン用のコマンド
            OnPlayButtonClickCommand = new MyRelayCommand(OnPlayButtonClick);
        }

        private void OnPlayButtonClick()
        {
            var dialog = new OpenFileDialog();
            if (dialog.ShowDialog() == DialogResult.OK)
            {
                WaveOutEvent outputDevice = new WaveOutEvent();
                AudioFileReader afr = new AudioFileReader(dialog.FileName);
                outputDevice.Init(afr);
                outputDevice.Play();
            }
        }
    }
}

MainWindowModelのインスタンスを用意します。

private MainWindowModel _model = new MainWindowModel();

Musicのリストを扱うプロパティを用意します。
NotifyPropertyChanged("MusicList");を記述することで、MusicListプロパティに値の変化があったときにViewに通知されます。
めちゃくちゃ重要ポイントです。

// 音楽の一覧
private List<Music> _musicList;
public List<Music> MusicList
{
    get { return this._musicList; }
    set 
    { 
        this._musicList = value;
        NotifyPropertyChanged("MusicList");
    }
}

最後にコンストラクタでMusicListプロパティを初期化します。

/// <summary>
/// コンストラクタ
/// </summary>
public MainWindowViewModel() 
{
    // フォルダ内の音楽の読込
    MusicList = this._model.LoadMusicFiles();
    // 再生ボタン用のコマンド
    OnPlayButtonClickCommand = new MyRelayCommand(OnPlayButtonClick);
}

音楽を一覧表示する

MusicListの中身をListViewで一覧表示します。
まずは`ListView`の見た目をカスタムしやすくするためにListViewLayoutManagerというプラグインを導入します。
例によってプロジェクト > NuGetパッケージの管理からListViewLayoutManagerと検索してインストールします。

それではListViewを修正します。

MainWindow.xaml

<Window x:Class="MusicPlayer.MVVM.View.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MusicPlayer"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        xmlns:viewmodels="clr-namespace:MusicPlayer.MVVM.ViewModel"
        xmlns:ui="http://schemas.modernwpf.com/2019" 
        ui:WindowHelper.UseModernWindowStyle="True"
        d:DataContext="{d:DesignInstance Type=viewmodels:MainWindowViewModel}"
        Background="#262626"
        Foreground="White"
        MinHeight="600" 
        MinWidth="950"
        xmlns:ctrl="clr-namespace:Itenso.Windows.Controls.ListViewLayout;assembly=Itenso.Windows.Controls.ListViewLayout"
        >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>

        <Button 
            Grid.Column="0" Grid.Row="1"
            Width="30" Height="30"
            Content="▶"
            Command="{Binding OnPlayButtonClickCommand}"
            />

        <ui:NavigationView  Background="#131313" 
                            Grid.Column="0" Grid.Row="0" 
                            x:Name="NaviView"
                            IsBackButtonVisible="Collapsed"
                            IsSettingsVisible="False"
                            IsTitleBarAutoPaddingEnabled="False"
                            IsPaneToggleButtonVisible="False"
                            PaneDisplayMode="Left"
                            Width="150"
                            >
            <ui:NavigationView.MenuItems>
                <ui:NavigationViewItem
                    Content="Music"
                    Icon="Audio"
                    IsSelected="True" />
            </ui:NavigationView.MenuItems>
        </ui:NavigationView>

        <Grid Background="#131313" 
              Grid.Column="1" Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
                <RowDefinition />
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0"
                       Text="Music"
                       Margin="30,30,30,0"
                       FontWeight="Bold"
                       FontSize="24" />
            <ListView Grid.Row="1"
                      Margin="30,0,0,0"
                      x:Name="MusicList" 
                      SelectionMode="Single"
                      ctrl:ListViewLayoutManager.Enabled="true"
                      ItemsSource="{Binding MusicList}"
                      >
                <ListView.View>
                    <GridView ScrollViewer.VerticalScrollBarVisibility="Auto">
                        <GridViewColumn Header="Title" 
                                        DisplayMemberBinding="{Binding Title}"
                                        ctrl:ProportionalColumn.Width="8"/>
                        <GridViewColumn Header="Artist" 
                                        DisplayMemberBinding="{Binding Artist}"
                                        ctrl:ProportionalColumn.Width="4"/>
                        <GridViewColumn Header="Album" 
                                        DisplayMemberBinding="{Binding Album}"
                                        ctrl:ProportionalColumn.Width="5"/>
                        <GridViewColumn Header="Track" 
                                        DisplayMemberBinding="{Binding Track}"
                                        ctrl:ProportionalColumn.Width="2"/>
                        <GridViewColumn Header="Time" 
                                        DisplayMemberBinding="{Binding Time}"
                                        ctrl:ProportionalColumn.Width="3"/>
                    </GridView>
                </ListView.View>
            </ListView>
        </Grid>
    </Grid>
</Window>

まずWindowタグ内に以下を追加します。
先程インストールしたListViewLayoutManagerが使えるようになります。

xmlns:ctrl="clr-namespace:Itenso.Windows.Controls.ListViewLayout;assembly=Itenso.Windows.Controls.ListViewLayout"

ListViewにはctrl:ListViewLayoutManager.Enabled="true"とItemsSource="{Binding MusicList}"を追加しました。
ListViewLayoutManagerの有効化とViewModelのMusicListプロパティのバインドをしています。
またx:Name="MusicList"とViewModelのNotifyPropertyChanged("MusicList");で設定している名前が一致していることを確認してください。

 <ListView Grid.Row="1"
           Margin="30,0,0,0"
           x:Name="MusicList" 
           SelectionMode="Single"
           ctrl:ListViewLayoutManager.Enabled="true"
           ItemsSource="{Binding MusicList}"
           >

ListView.Viewでは表示するものの設定をしています。
DisplayMemberBindingでは表示するMusicクラスのプロパティをバインドしています。
ctrl:ProportionalColumn.Width=""ではListViewLayoutManagerを使用して列の幅を割合で指定しています。
GridのようにWidth="8*"とは記述できないのでListViewLayoutManagerを使用しています。

<ListView.View>
    <GridView ScrollViewer.VerticalScrollBarVisibility="Auto">
        <GridViewColumn Header="Title" 
                        DisplayMemberBinding="{Binding Title}"
                        ctrl:ProportionalColumn.Width="8"/>
        <GridViewColumn Header="Artist" 
                        DisplayMemberBinding="{Binding Artist}"
                        ctrl:ProportionalColumn.Width="4"/>
        <GridViewColumn Header="Album" 
                        DisplayMemberBinding="{Binding Album}"
                        ctrl:ProportionalColumn.Width="5"/>
        <GridViewColumn Header="Track" 
                        DisplayMemberBinding="{Binding Track}"
                        ctrl:ProportionalColumn.Width="2"/>
        <GridViewColumn Header="Time" 
                        DisplayMemberBinding="{Binding Time}"
                        ctrl:ProportionalColumn.Width="3"/>
    </GridView>
</ListView.View>

ここまででこんな感じの見た目になっているでしょうか。

次回は再生ボタンの修正をしたいと思います。

参考

https://www.urablog.xyz/entry/2018/05/02/070000


いいなと思ったら応援しよう！