MP3プレイヤーのメーター

質問

FlashにてMP3プレイヤー製作を続けています。

その中で、バーというか、メーターというか、再生位置を表示するものを置いて、それを動かすことで曲の終盤を聞いたり、序盤を聞いたり出来るようにしたいと思っています。

そこで、StartDragを使って、バーを動かす事だけには成功しました。
が、曲の再生に従ってどうやってバーを動かすのか、また、バーを動かす事でどうやって曲の再生位置を変えればいいのか、皆目見当がつきません。

どなたか、文面を理解してくださった方、どうかアドバイスをください。見づらい文面ですみません・・・。

回答No.1

noname#35109 · ベストアンサー

MP3プレイヤーと書かれているところから，
外部 MP3 ファイルを SWF にロードして再生するという意味として回答します。

> 曲の再生に従ってどうやってバーを動かすのか、
> また、バーを動かす事で
> どうやって曲の再生位置を変えればいいのか、
> 皆目見当がつきません。

皆目見当がつかないのは困りますよ。
おおよその見当くらいはつけないと，
おそらくこの回答を読んで実践してみても何もできないと思います。

というか，おおよその見当はついているでしょう？

音が再生されているときは，
音全体の長さに対する，音が現在再生されている部分の割合を求めて，
その割合でバーの座標を動かすのです。
また，逆に，
バーをドラッグして動かした場合は，
そのバーを動かした座標から音を再生開始させる部分を動かすのです。

イメージを図示するとこんな感じ↓です。

　　　　　　　 ↓音が再生されている部分
　　　　　　　 ◇
　◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ ←音全体

　　　　↓バーの位置
　　　　▽
　▲▲▲▲▲▲▲▲▲ ←バーの動く範囲

同じ比の場所に，お互いを移動すれば良いのです。
数式っぽく書くと次のような感じです。

　音が再生されている部分 / 音全体
　＝ バーの位置 / バーの動く範囲

この等式を成り立たせるようにお互いを操作し合うのです。

おそらく，
ここまでくらいは見当がついていると思います。

もし見当がついていないか，
上に書いたことの意味が全然わからない場合は，
言い方が悪いかもしれませんが，
Flash より先に小学校の理科や算数をしっかりやってください。

質問者様の年齢がわかれば，違った言い方になるかもしれませんが，
なにしろこのコミュニティでは年齢すらわからないようにできているので，
本当に全くレベルがわかりません。
ですからこういう書き方をしましたが，
けなしているわけではなく，純粋にそう思うだけなので，
気を悪くなさらないでください。

上に書いた「お互いを操作し合う」ということ自体が，
どういう意味であるかはわかるものとして Flash の説明に入ります。

あと，
ご使用の Flash のバージョンを書かれていませんが，
勝手に Flash MX 以上をお持ちで，
Flash Player 6 以上にパブリッシュする場合について回答します。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

サウンドオブジェクトの音全体の時間（ミリ秒）は，
サウンドの 「duration プロパティ」を参照することによって得られます。

また，サウンドオブジェクトの再生中の位置は，
サウンドの 「position プロパティ」を参照することによって得られます。

外部MP3ファイルとして，「ongaku1.mp3」 というファイル名の音を用意して，
Flash や HTML と同じフォルダに置くものとして続けます。

　　任意のフォルダ
　　　　├ ○○.html（○○.swfを表示）
　　　　├ ○○.swf
　　　　└ ongaku1.mp3

とりあえず第一段階として，
次のようなものを作ってみてください。

まず，新規ドキュメントを作成して，
「ongaku1.mp3」 と同じフォルダに保存します。

そして，ステージ上のてきとうな場所に，
少なくとも全角10文字以上が入るような，
横長のダイナミックテキストフィールドを２つ作成します。
文字の色は黒など背景色とは違う色に設定しておいてください。
これは数値を目で見るための目安です。

そして，
ダイナミックテキストのうち１つには，
「myTXT1」 というインスタンス名を付けておきます。
そしてもう１つには，
「myTXT2」 というインスタンス名を付けておきます。
付けるのは 変数名 ではなく インスタンス名 です。

次に，
新規レイヤー を追加して，
その レイヤー の フレーム1 に次のようなスクリプトを書いてください（コピペ可能）。

----------------------------------------
// サウンドクラスのインスタンスを作成
var my_snd = new Sound();
// 外部MP3ファイルのロード（ストリーミング再生あり）
my_snd.loadSound("ongaku1.mp3", true);
// １フレーム進む時間ごとに毎回実行
_root.onEnterFrame = function() {
// 単に目安の数値表示↓
myTXT1.text = "トータルミリ秒数："+my_snd.duration;
myTXT2.text = "再生ミリ秒数："+my_snd.position;
};
----------------------------------------

これで「制御」→「ムービープレビュー」をしてみつと無事に動作しますでしょうか？
ちゃんと無事に動作したなら，
この数値を使ってバーを動かせば良いということになります。

第一段階としての説明は以上です。

この数値を利用して，
あとは，ご自身で考えられるようであれば，それにこしたことはありません。
以下の説明は無視してください。

なにしろ，構造の作成を文字だけで説明しなければならないため，
書く方も大変ですが，それを理解する方も大変だと思います。
理解するより考えた方が早いかもしれません。

//////////////////////////////////////////////////////

次の段階の説明をしますが，最初はバーの作成です。

まず，
テキストフィールドと同じレイヤーのステージ上に，
真横の線を線ツールで引いてください。
線の太さは適当に 1～5px くらいで，
線の長さも適当に 150～200px くらいです。
色も好きな色でかまいません。
とにかく角度が付かないように真横の線です。

線には見えませんが一応
ステージ上に描いた線のつもり↓。

　■■■■■■■■■■■■■■■■■■

この線はバーではありません。
バーが動く範囲を指定する物です。
数値で動く範囲を指定するより，
見た目で指定した方が作りやすいと思うのでこの線を用意しています。

線が描けましたらこの線をムービークリップに変換してください。
ただし，変換するときの注意点は 基準点 です。
基準点を「中央の左」に指定してムービークリップに変換してください。

　-----------------------------------------
　タイプ(T):　◎ムービークリップ　基準点(R):□■□
　　　　　　　　○ボタン　　　　　　　 　　　　　　　□□□
　　　　　　　　○グラフィック　　　　　　　　　　　□□□
　-----------------------------------------

変換できましたら，そのムービークリップにインスタンス名を付けます。
この説明では，
「prg_mc」 というインスタンス名を付けておきます。
「prg_mc」 というのは，
Progress MovieClip （進行状況ムービークリップ）の略のつもりです。

その 「prg_mc」 をダブルクリックして，
「prg_mc」 内の編集に入ります。

「prg_mc」 内の編集に入ると，
さっき引いた線があって，レイヤーは１つだけだと思いますから，
その線の上にレイヤーを新規で追加して，
その新規レイヤーのステージ上に，バーとなる塗りの四角を描いてください。
描く位置は，線の中央あたりが良いです。
大きさは１辺 10～20px くらいで良いです。

　　　　　　　　　　　　　　↓四角
　　　　　　　　　　　　■■■
　■■■■■■■■■■■■■■■■■■
　　　　　　　　　　　　■■■

四角い塗りが描けましたら，
その四角い塗りをムービークリップに変換してください。
ただし，変換するときの注意点は今回も 基準点 です。
今度は基準点を
「中央の中央（真ん中）」に指定してムービークリップに変換してください。

四角い塗りのムービークリップができましたら，
そのムービークリップにもインスタンス名を付けます。
この説明では，
「cnt_mc」 というインスタンス名を付けておきます。
「cnt_mc」 というのは，
Control MovieClip （調節ムービークリップ）の略のつもりです。

「cnt_mc」 ができましたら，
「編集」→「ドキュメントの編集」で，
_root（メインムービーのタイムライン）の編集にもどります。

そして，
最初の第一段階で書いたスクリプトを全て消して，
次のように書き替えてください（コピペ可能）。

-----------------------------------------------
// サウンドクラスのインスタンスを作成
var my_snd = new Sound();
//
// サウンドクラスのインスタンス onLoad 関数の定義
my_snd.onLoad = function(Seikou) {
if (Seikou) {
// 音の再生開始
my_snd.start();
_root.prg_mc.cnt_mc._x = 0;
}
};
// 外部MP3ファイルのロード（ストリーミング再生無し）
my_snd.loadSound("ongaku1.mp3", false);
//
// 再生フラグの初期値を設定
var str_flg = 0;
// 再生ポジション用変数の初期化
var my_pos = 0;
// ムービークリップ prg_mc の横幅を保存
var prg_w = _root.prg_mc._width;
//
// １フレーム進む時間ごとに毎回実行
_root.onEnterFrame = function() {
// 単に目安の数値表示↓
myTXT1.text = "トータルミリ秒数："+my_snd.duration;
myTXT2.text = "再生ミリ秒数："+my_snd.position;
//
// もし再生フラグが 0 であれば
if (str_flg == 0) {
my_pos = my_snd.position;
// コントロールMC を音の再生に合わせて動かす
_root.prg_mc.cnt_mc._x = my_pos/my_snd.duration*prg_w;
}
};
//
// コントロールMCを押したときの動作定義
_root.prg_mc.cnt_mc.onPress = function() {
// 再生フラグを 1 にする
str_flg = 1;
// 音をストップ
my_snd.stop();
// ドラッグ開始（範囲はprg_mcの横幅まで）
this.startDrag(false, 0, 0, _root.prg_w, 0);
};
//
// コントロールMCを離したときの動作定義
_root.prg_mc.cnt_mc.onRelease = function() {
// 再生フラグを 0 にする
str_flg = 0;
// 再生ポジションの算出
my_pos = my_snd.duration*_root.prg_mc.cnt_mc._x/prg_w;
// 計算した再生ポジション(秒)から音を再生
my_snd.start(my_pos/1000);
// ドラッグ終了
this.stopDrag();
};
// コントロールMCをドラッグアウトしたときは離したときと同じ
_root.prg_mc.cnt_mc.onReleaseOutside
= _root.prg_mc.cnt_mc.onRelease;
-----------------------------------------------

これで，「制御」→「ムービープレビュー」や，
もしくは「パブリッシュ」してもらうと，
音でバーを動かし，バーで音を動かすものができると思います。

こんな感じですね。
いちおうなるべく１行１行コメント行を入れていますが，
上記スクリプトは私が勝手に私の好きなように考えただけですから，
理解するより，ご自身で考えられた方がわかりやすいかもしれません。

Flash は難しい物になると数学も使いますが，
ほとんど数学レベルのものは使いません。
たいていのものは，
「理科工作（≒図画工作）」に近い物があると思います。
切ったり貼ったり，しくみを考えたりしながら動くオモチャを作る感じです。
見た目を重視する場合は，「理科工作」以前に，
「芸術（美術）」や的なものが必要ですが。

「理科工作」が頭の中でできていたら，
それを動かすのにActionScriptという言語能力が必要になりますが，
どっちかというと「理科工作（自分で工夫して考えて作る）」の方が大切だと思います。

一応，ActionScript の参考URL↓。
参考URLというより Flash 8 のヘルプが大半です。

duration (Sound.duration プロパティ)
http://livedocs.macromedia.com/flash/8_jp/main/00002669.html

position (Sound.position プロパティ)
http://livedocs.macromedia.com/flash/8_jp/main/00002680.html

onLoad (Sound.onLoad ハンドラ)
http://livedocs.macromedia.com/flash/8_jp/main/00002678.html

start (Sound.start メソッド)
http://livedocs.macromedia.com/flash/8_jp/main/00002685.html

startDrag (MovieClip.startDrag メソッド)
http://livedocs.macromedia.com/flash/8_jp/main/00002516.html

インスタンスの基準点
http://homepage3.nifty.com/ginga-b/MX/inst_refpoint.html

お礼

大変詳しいご解説ありがとうございました。
確かに、flashは工作のような要素が多いかと思います。

皆目、といったのは間違えでしたね^^;
以後気をつけます。
本当にありがとうございました。

回答No.2

noname#35109

＃１です。
後半部分の訂正です。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
線が描けましたらこの線をムービークリップに変換してください。
ただし，変換するときの注意点は 基準点 です。
基準点を「中央の左」に指定してムービークリップに変換してください。

　-----------------------------------------
　タイプ(T):　◎ムービークリップ　基準点(R):□■□
　　　　　　　　○ボタン　　　　　　　 　　　　　　　□□□
　　　　　　　　○グラフィック　　　　　　　　　　　□□□
　-----------------------------------------

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

と書きましたが，
日本語と図示がずれていますね。
日本語の方が正解です。
訂正します↓。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
線が描けましたらこの線をムービークリップに変換してください。
ただし，変換するときの注意点は 基準点 です。
基準点を「中央の左」に指定してムービークリップに変換してください。

　-----------------------------------------
　タイプ(T):　◎ムービークリップ　基準点(R):□□□
　　　　　　　　○ボタン　　　　　　　 　　　　　　　■□□
　　　　　　　　○グラフィック　　　　　　　　　　　□□□
　-----------------------------------------
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

//////////////////////////////////////////////////////

ちなみに，＃１のさらにあと，

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
四角い塗りが描けましたら，
その四角い塗りをムービークリップに変換してください。
ただし，変換するときの注意点は今回も 基準点 です。
今度は基準点を
「中央の中央（真ん中）」に指定してムービークリップに変換してください。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

を図示すると次のようになります。

　-----------------------------------------
　タイプ(T):　◎ムービークリップ　基準点(R):□□□
　　　　　　　　○ボタン　　　　　　　 　　　　　　　□■□
　　　　　　　　○グラフィック　　　　　　　　　　　□□□
　-----------------------------------------

とにかく，
ActionScript 以前に，
Flash の特性を理解することと，
それより何より「理科工作（≒図画工作）」が大変なのです。