音声を録音してライブラリに保存するプログラムを作る

2013年6月6日(木)
薬師寺 国安

今回のサンプルは、録音した音声をライブラリに保存・再生するプログラムです。

まず、話す秒数を選択します。するとカウントダウンが開始されますので、カウントが0になるまで話すことができます(図1)。
話した内容はファイルとして、ビデオライブラリ内のSoundFileというサブフォルダに保存されます。
保存された音声ファイル(mp4)の一覧がリストボックスに表示されますので、任意のファイルを選択すると音声が再生されます(図2)。

図1:カウントダウンが0になるまで話すことができる(クリックで拡大)
図2:ファイルを選択して音声を再生している(クリックで拡大)

実際に動かした動画は下記のようになります。スマホで撮影した動画のため、見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。
「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_VoiceRecording」という名前を付けています。

ソリューションエクスプローラー内にImagesというフォルダを作って、画像を2枚配置しておきます。

ダウンロードされたサンプルファイルには、画像ファイルは追加済みです。

コントロールの配置

ツールボックスからデザイン画面上に、ScrollViewerコントロールを1個配置し、HorizontalScrollBarVisibilityプロパティにVisibleを指定して、水平スクロールバーを表示させます。
このScrollviewerの子要素として以下のコントロールを配置します。これはタブレットPCを縦にした場合に、水平スクロールを可能にするためです。

Imageコントロールを2個、WinRTXAML ToolkitのコントロールであるCounddownControlを1個、ComboBoxコントロールを1個、MediaElementコントロールを1個、TextBlockコントロールを4個、ProgressRingコントロールを1個、ButtonコントロールとListBoxコントロールを1個ずつ配置します。

書き出されるXAMLをリスト1のように編集します。レイアウトは図3のようになります。

リスト1 書き出されたXAMLコード(MainPage.xaml)

  • (1)要素を配置し、HorizontalScrollBarVisibilityプロパティにVisibleを指定して水平スクロールを可能にしています。この要素の子要素として以下の要素を配置します。
  • (2)要素を配置し、SourceプロパティにImageフォルダ内の画像を指定します。
  • (3)WinRTXAML ToolkitのCountdownContorl1という名前の要素を配置しています。
  • (4)ComboBox1という名前の要素を配置し、プロパティの[共通]パネルにあるItemsプロパティから「コレクションエディタ」を起動して、要素を追加し、Contentプロパティに録音の秒数となる値を指定しておきます。
  • (5)名前がMediaElement1という要素を配置します。
  • (6)項目名となる要素を配置します。
  • (7)ProgressRing1という名前の要素を配置します。最初の状態ではIsEnabledにFalseを指定して、使用不可としておきます。
  • (8)stopButtonという名前の
  • (9)fileNameListBoxという名前の、保存したmp4ファイルの一覧を表示する要素を配置します。
  • (10)messageTextBlockという名前の要素を配置します。
<Page
  x:Class="Win8_VoiceRecording.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Win8_VoiceRecording"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:Controls="using:WinRTXamlToolkit.Controls"
  mc:Ignorable="d">
  <Grid>
    <ScrollViewerHorizontalScrollBarVisibility="Visible" Margin="0,-10,0,10">■(1)
      <Grid>
        <Image HorizontalAlignment="Left" Height="256" Margin="384,140,0,0" VerticalAlignment="Top" Width="82" Source="Images/microphone.png"/>■(2)
        <Image HorizontalAlignment="Left" Height="219" Margin="845,145,0,0" VerticalAlignment="Top" Width="192" Source="Images/speaker.png"/>■(2)
        <Controls:CountdownControlx:Name="CountdownControl1"  Width="200" Height="200" Margin="28,71,1138,497"/>■(3)
        <ComboBoxx:Name="ComboBox1" HorizontalAlignment="Left" Height="56" Margin="365,70,0,0" VerticalAlignment="Top" Width="129" FontFamily="Meiryo UI" FontSize="36">■(4)
          <ComboBoxItem Content="5" FontSize="36" FontFamily="Meiryo UI" />■(4)
          <ComboBoxItem Content="10" FontSize="36" FontFamily="Meiryo UI"/>■(4)<ComboBoxItem Content="15" FontSize="36" FontFamily="Meiryo UI"/>■(4)
          <ComboBoxItem Content="20" FontSize="36" FontFamily="Meiryo UI"/>■(4)
          <ComboBoxItem Content="25" FontSize="36" FontFamily="Meiryo UI"/>■(4)
          <ComboBoxItem Content="30" FontSize="36" FontFamily="Meiryo UI"/>■(4)
          <ComboBoxItem Content="40" FontSize="36" FontFamily="Meiryo UI"/>■(4)
          <ComboBoxItem Content="50" FontSize="36" FontFamily="Meiryo UI"/>■(4)
          <ComboBoxItem Content="60" FontSize="36" FontFamily="Meiryo UI"/>■(4)
          <ComboBoxItem Content="120" FontSize="36" FontFamily="Meiryo UI"/>■(4)
          <ComboBoxItem Content="180" FontSize="36" FontFamily="Meiryo UI"/>■(4)
          <ComboBoxItem Content="300" FontSize="36" FontFamily="Meiryo UI"/>■(4)
        </ComboBox>■(4)
        <MediaElementx:Name="MediaElement1" HorizontalAlignment="Left" Height="46" Margin="806,183,0,0" VerticalAlignment="Top" Width="327"/>■(5)
        <TextBlockHorizontalAlignment="Left" Height="35" Margin="233,81,0,0" TextWrapping="Wrap" Text="録音秒数" VerticalAlignment="Top" Width="108" FontFamily="Meiryo UI" FontSize="24"/>■(6)
        <ProgressRingx:Name="ProgressRing1" HorizontalAlignment="Left" Height="168" Margin="839,165,0,0" VerticalAlignment="Top" Width="204" IsEnabled="False" Foreground="Crimson" FontSize="36"/>■(7)
        <Button x:Name="stopButton" Content="中止" HorizontalAlignment="Left" Height="76" Margin="316,498,0,0" VerticalAlignment="Top" Width="200" FontFamily="Meiryo UI" FontSize="36" IsEnabled="False"/>■(8)
        <ListBoxx:Name="fileNameListBox" HorizontalAlignment="Left" Height="399" Margin="691,369,0,0" VerticalAlignment="Top" Width="527" FontFamily="Meiryo UI" FontSize="24"/>■(9)
        <TextBlockx:Name="messageTextBlock" HorizontalAlignment="Left" Height="84" Margin="203,568,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="483" Foreground="Crimson" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold"/>■(10)
        <TextBlockHorizontalAlignment="Left" Height="101" Margin="203,657,0,0" TextWrapping="Wrap" Text="音声ファイルはビデオライブラリ内のSoundFileというサブフォルダに保存されています。不要なファイルは手動で削除してください。" VerticalAlignment="Top" Width="394" FontFamily="Meiryo UI" FontSize="18"/>■(6)
        <TextBlockHorizontalAlignment="Left" Height="65" Margin="839,73,0,0" TextWrapping="Wrap" Text="スピーカー" VerticalAlignment="Top" Width="237" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold"/>■(6)
      </Grid>
      </ScrollViewer>
  </Grid>
</Page>
図3:各コントロールを配置した(クリックで拡大)
  • 音声を録音してライブラリに保存するプログラム

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています