このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • Windows:目的毎,ファイルの種類(拡張子)毎に既定アプリを変更 (11/25)
  • Windows:ヘッドホン(イヤホン)から音が出ないときの対処法 (11/23)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    簡単にウェブサイトに埋め込めるMP3プレイヤー

    このエントリーをはてなブックマークに追加
    イメージ


    こんにちは、さち です。

    先日の記事「音声素材を電話音声っぽく加工する」で
    サンプルのMP3を再生できるように
    ウェブページにプレイヤーを埋め込みました。

    その時に利用したのが、導入が簡単で見た目もシンプルな
    「MP3 Player」というプレイヤーです。

    今回は、この「MP3 Player」の導入方法の覚え書きです。
    MP3 Plyer には機能が異なるいくつかの種類がありますが
    「MAXI」の導入方法について書いていきます。




    「MP3 Player」の特徴

    私が「MP3 Player」を選んだ理由は次の3つ。
    • とにかく軽い: プレイヤー本体は6.7KB、最軽量verなら2.6KB
    • 導入が簡単: swfファイルだけ準備すればOK
    • カスタマイズ可能: 必要なボタンだけを表示できる

    最初は他のプレイヤーを導入しようと思ったのですが
    重かったり、導入が面倒だったりと条件が合いませんでした。




    使用のための前準備

    プレイヤー本体である swfファイル をダウンロードします。

    1. MP3 Player のダウンロードページ にアクセスし
      player_mp3_maxi.swf のリンク上で「右クリック」→「名前を付けてリンク先を保存」。
      (Internet Explorer の場合は「右クリック」→「対象をファイルに保存」)
      操作画面

    2. swfファイル が PC にダウンロードされました。
      操作画面

    3. swfファイル を自分のサーバーにアップロードします。
      操作画面

    これで使用のための前準備は完了です。




    基本コード

    MP3 Player の使用に必要な基本コードは4行のみ。
    HTML ファイルに下記のように記述すればOK。
    <object type="application/x-shockwave-flash" data="http://example.com/player_mp3_maxi.swf" width="200" height="20">
    <param name="movie" value="http://example.com/player_mp3_maxi.swf" />
    <param name="FlashVars" value="mp3=http://example.com/sample.mp3" />
    </object>

    赤字,緑字の部分は自サイトのファイルに書き換えましょう。
    赤字は、プレイヤー本体(swfファイル)がある場所
    緑字は、再生するMP3ファイルがある場所です。
    場所(URL)の記述は絶対パス,相対パスどちらでもよいです。

    実際に基本コードのみで設置したプレイヤーはこんな感じ。
    再生ボタン,シークバーのみでシンプルです。






    プレイヤーをカスタマイズ

    プレイヤーの幅,高さの変更などをするには
    「name」値が「FlashVars」である <param>タグ の「value」に
    カスタマイズ用のコードを追記する必要があります。

    追記の際は、value の値の末尾に「&(アンパサンド)」を付け
    新たなパラメーターを記述します。


    ■プレイヤーの幅,高さを変更
    例えば、プレイヤーの幅を「320px」に変更する場合は
    <object>タグ内の width の値を 320 に変更し
    さらに、MP3ファイル指定の後に「&」を付け「width=320」と記述。
    高さを変更する場合は同様に「height」を変更,追加すればOK。
    <object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="320" height="20">
    <param name="movie" value="player_mp3_maxi.swf" />
    <param name="FlashVars" value="mp3=sample.mp3&width=320" />
    </object>


    ■ボリュームを設置
    MP3ファイル指定の後に「&」を付け「showvolume=1」と記述。
    ボリュームの幅,高さは「volumewidth」「volumeheight」
    ボリュームの初期値(0~200)は「volume」で指定できます。
    <object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="200" height="20">
    <param name="movie" value="player_mp3_maxi.swf" />
    <param name="FlashVars" value="mp3=sample.mp3&showvolume=1&volume=100" />
    </object>


    他にも様々なパラメーターがあります。
    詳細は公式サイトの Documentation を参照して下さい。



    MP3 Player 公式サイトはこちらからどうぞ。

       → MP3 Player (英語)


    サンプルの音楽にはこちらのものを使わせて頂きました。
    ありがとうございました。

       → FM音源風BGM2【ループ対応】 - ニコニ・コモンズ








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら


    管理人のみ閲覧できます
    このコメントは管理人のみ閲覧できます
    | 2015/04/21/Tue [EDIT]
    おせわになりました
    ここがわかりやすかったです、
    ひでた | 2016/09/15/Thu [EDIT]



    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2016 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ