Java/JavaFX/サウンドムービー

Top > Java > JavaFX > サウンドムービー

サウンドムービー

現在のGUIはサウンド、ムービーが欠かせなく当たり前の要素になっていまがJavaはサウンド、ムービーなどのメディアは得意分野でありませんでした。JavaFXはOn2Technologyと提携することででもAdobe Flash VideoのFLVフォーマットを再生できるようになりました。On2TechnologyはAdobeFlashVideo?が採用しているVP6コーデック企業動画圧縮技術の会社,ビデオ圧縮ソフトウェアが専門。

JavaFXがサポートしているメディア(JavaFX FAQより引用)

Mac OS X 10.4以降ビデオ: H.261,H.263,H.264,MPEG-1,MPEG-2,MPEG-4,Sorenson Video 2,Sorenson Video 3 オーディオ: AIFF,MP3,WAV,MPEG-4 AAC Audio,MIDI .3gp,.3gpp,3g2,3gp2,.avi,.mov,.mp4,.mp3,.m4a,.m4b,.m4p
Windows XP,Vistaビデオ: Windows Media Video,H.264 オーディオ: MPEG-1,MP3,Windows Media Audio, MIDI.mp3,.wav,.wmv,.avi,.asf
Windows XP,Vista,Mac OS X 10.4以降,Linux,Solarisビデオ: On2 VP6 オーディオ: MP3.flv,.fxm,.mp3

プラットホームに関係なくサポートしているのは、サウンドではMP3、ムービーは、On2 VP6を使用したAdobe Flash VideoのFLVフォーマットとFXMフォーマットです。Windows、DirectXに含まれるDirectShow?がサポートしているメディアです。MacOSX、QuickTime?がサポートしているメディアとなります。

サウンド

サウンドとムービーもクラスを使用します。メディアを扱うのがjavafx.scene.media.Mediaクラスです。

  • Media
    • 変数source
      再生するメディアをURLで位置を指定します。http,fileを使用でききます。jarファイルにサウンドファイルを含めるのも可能です。

メディアを再生するのがjavafx.scene.media.MediaPlayer?クラスです。

  • MediaPlayer?
    • media変数
      使用するMediaオブジェクトをセット。
    • play関数
      再生。
    • pause関数
      ポーズ。
    • stop関数
      停止。
   //インスタンス生成
   var player = MediaPlayer {    
       media: Media {
           //サウンドファイルパス
           source: "{__DIR__}MySound.mp3"
       }
   }
   //サウンド再生
   player.play();
  • MediaPlayer?クラス
    • 変数volume
      ボリュームを表す。
    • 変数repeatCount
      繰り返し再生する回数を表す。

など用意されています。

   //サウンドバランス
   var pointX =100.00;
   //サウンド音量
   var pointY = 100.00;

   //インスタンス生成
   var player = MediaPlayer {
       //左右バランス
       balance: bind pointX / 100.00 - 1.0
       //ボリューム
       volume: bind (200.0 -pointY) / 200.0
       //無限に繰り返す
       repeatCount: MediaPlayer.REPEAT_FOREVER
       media: Media {
           //サウンドファイルパス
           source: "file:/C:/sample/MySound.mp3"
       }
   }
   Stage {
       title : "Sound"
       scene: Scene {
           width: 300
           height: 300
           content: [
               ImageView {
                   image: Image {
                       url: "{__DIR__}Background.png"
                   }
                   fitWidth:100
                   preserveRatio:true
                   translateX: bind pointX
                   translateY: bind pointY
                   //ドラック開始位置
                   var dragX: Number = pointX;
                   var dragY: Number = pointY;
                   //サウンド再生と位置の保存
                   onMousePressed: function( e: MouseEvent ):Void {
                       dragX = pointX;
                       dragY = pointY;
                       player.play();
                   }
                   //サウンドの再生を停止
                   onKeyReleased: function( e: KeyEvent ):Void {
                       player.stop();
                   }
                   //位置を変換し、サウンドのボリューム、バランス。
                   onMouseDragged: function( e: MouseEvent ):Void {
                       //x座標の変更、ウィンドウからはみ出ても考慮する
                       pointX = e.dragX + dragX;
                       if(pointX >= 200){
                           pointX = 200;
                       }else if(pointX <= 0){
                           pointX = 0;
                       }
                       //y座標の変更、ウィンドウからはみ出ても考慮する
                       pointY = e.dragY + dragY;
                       if(pointY >= 200){
                           pointY = 200;
                       }else if(pointY <= 0){
                           pointY = 0;
                       }
                   }
               }
           ]
       }
   }

実行するとイメージがが表示されます。

  • イメージをマウスで押すと音楽が流れます。
  • ドラックしながら上下に移動すると、ボリュームが変わります。
  • ドラックしながら左右に移動すると、音声のバランスが変わります。
  • マウスを話すと音楽が止まります。
sound.JPG

Javafx.scene.Groupクラスに、座標を表す変数X,Yがないので、変数translateX、translateYにpointX、pointYをバインドさせています。translateX、translateYを0とした場合、イメージの左上が座標0,0に当たります
マウスが押されたらonMousePressed?関数でplay関数がコールされ、再生を開始します。ドラックの開始位置を変数dragX,dragYに保持させています。マウスが離されたときは、onMouseReleased?関数でstop関数をコールし再生を停止します。
ドラックすることでOnMouseDragged?関数がコールされ描画位置を変更します。ドラッグの開始位置とドラッグ量を足し合わせ座標を更新しています。

ムービー

javafx.scene.media.MediaView?クラスを使用します。MediaView?クラスはmediaPlayer変数を持つので、サウンドの場合と同様にMediaPlayer?オブジェクトを生成して代入します。扱えるプロトコルは、http:、file:です。ムービの場合は、jarファイルに含むことはできません。
C:\sample\tyou.wmvに、あるムービーを再生する場合。

  //ムービのメディア
   var media = Media{
       //ムービーの場所
       source : "file:/C:/sample/tyou.wmv";   
   };
   //ムービーのメディアを含んだメディアプレイヤー
   var mediaPlayer = MediaPlayer{
       media: media    
   }
   Stage {
       title : "Movie"
       scene: Scene {
           width: media.width
           height: media.height
           //メディアプレイヤを表示するノード
           content: [
               MediaView{
                   mediaPlayer: mediaPlayer
               }
           ]
       }
   }
   //再生
   mediaPlayer.play();

プロトコルfile:を使用する場合、file:///C:/sample/tyou.wmvと、file:の後にスラッシュを3つ用意するのが本来の仕様ですが、バグがあるようで例外が発生します。バグを回避するためにfile:/C:/sample/tyou.wmvと記述します。
ムービーの幅と高さは、Mediaオブジェクトから取得できるのでSceneオブジェクトとムービのサイズを同じくしてます。
再生は、MediaPlayer?オブジェクトのplay関数を使用します。

#ref(): File not found: "movie_00.JPG" at page "Java/JavaFX/サウンドムービー"

MediaView?オブジェクトは変形することも可能です。回転の場合は、変数rotatableをtrueに設定し傾ける場合は、変数transformableをtrueに設定します。移動するだけなら設定は不要です。

   // ムービーのメディア
   var media = Media {
         source : "file:/C:/sample/tyou.wmv"
   };
   // ムービーのメディアを含んだメディアプレイヤ
   var mediaPlayer = MediaPlayer {
       media: media
       repeatCount: MediaPlayer.REPEAT_FOREVER
   };
   // メディアプレイヤを表示するノード
   var mediaView = MediaView {
       mediaPlayer: mediaPlayer
       fitWidth: 100
       fitHeight:100
   };
   Stage {
       title: "Animated Movie Player"
       scene: Scene {
           width: 400
           height: 400
           fill: Color.BLACK
           content: mediaView
       }
   }
   // ムービーの再生
   mediaPlayer.play();
   // 垂直方向のアニメーション
   Timeline {
       autoReverse: true
       repeatCount: Timeline.INDEFINITE
       keyFrames: [
           KeyFrame {
               time: 0s
               values: mediaView.y => 0            
           },
           KeyFrame {
               time: 5s
               // ムービーの高さから移動範囲を決める
               values: mediaView.y => 330
           }
       ]
   }.play();
   // 水平方向のアニメーション
   Timeline {
       autoReverse: true
       repeatCount: Timeline.INDEFINITE
       keyFrames: [
           KeyFrame {
               time: 0s
               values: mediaView.x => 0
           },
           KeyFrame {
               time: 3s
               // ムービーの幅から移動範囲を決める
               values: mediaView.x => 300
           }
       ]
   }.play();

実行するとムービーを表示しながら、水平垂直方向に移動するサンプルです。

#ref(): File not found: "movie.JPG" at page "Java/JavaFX/サウンドムービー"


アクセス総数6688件

最終更新日: 2009-09-03 (木) 22:44:52 (2911d)

このページをブックマーク:

このページのURL(コピペして利用下さい):

TOP