ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

HP・ブログ関連 ガジェット・ツール 動画サイト関連

ホームページに音声を再生するプレーヤーを埋め込む方法

2019年4月7日

作成・編集したBGMや効果音等のサンプルを、ホームページ・ブログを見に来てくれた人に気軽に聞いて もらいたい! といった時に役に立つ"簡易mp3プレーヤー"をページに埋め込む方法を紹介します!

ちなみに導入に成功すると↓のようなプレイヤーが表示されます

 

色々なサイトさんで見かけるような典型的なプレイヤーですね!では以下で導入手順について 解説していきます。

オンライン購入時に万全のセキュリティ

職業ユーチューバーにオススメ!

① プレイヤー本体のダウンロード

まず、mp3のプラグインファイルを、配布場所(←クリックで移動)からダウンロードしてください。 (「player_mp3_maxi.swf」と書いてあるリンクを右クリック→"名前を付けてリンク先を保存" で保存してください)

ダウンロードが済んだら、自分のサイトのどこかのフォルダ内に、

  • ダウンロードした.swfファイル
  • 再生させたい.mp3ファイル

を配置しておいてください。

② htmlの記述

プレイヤーを配置したいページのhtmlの、配置したい箇所に以下の文を張り付けてください。 この時点で一応プレイヤーは表示されるはずです。

<object type="application/x-shockwave-flash" data="../swf/player_mp3_maxi.swf" width="200" height="20">
<param name="movie" value="../swf/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=../sounds/sample1.mp3&showvolume=1&volume=50" />
</object>

※1・2行目(data=)・・・手順①でプレイヤー本体(.swfファイル)を保存した場所のパスにしてください。

※3行目(mp3=)・・・手順①で音楽ファイル(.mp3)を保存した場所のパスと、再生する.mp3のファイル名にしてください。ただし 音楽ファイル名に日本語は使用しないでください

※1行目(width&height)・・・プレイヤーの横幅(width)と縦幅(height)です。任意に設定してください。

※3行目(volume)・・・ページを開いた初期状態での音楽のボリュームです。0~200の間で任意に設定してください。

手順③ 全てのファイルのアップロード

調整が済んだら、最後に.swf .mp3データを含めたすべてのファイルをサーバーにアップロードして終わりです!

どうでしたか?以外に簡単にプレイヤーを設置できたと思います!自分のホームページにいろんな機能を付けていって、どんどん充実させていきたいですね!( ´∀`)

※もし、プレイヤーの再生ボタンを押しても音楽が流れないという方は、音楽ファイルが正常に読み込まれていない可能性があるので、 ちゃんと音楽ファイルが.mp3の形式になっているか、読み出し文が正しい保存場所を指定出来ているか等を確認してみてください。

-HP・ブログ関連, ガジェット・ツール, 動画サイト関連
-, , , , , ,

Copyright© ゲマステ!- Gamers Station , 2019 All Rights Reserved.