ピアノの鍵盤をWebページで表現する方法

/ 0 Comments / , / , , /

名付けてWeb Piano！

今回はタイトルからも判って頂けるように、音も出せるクリエィティブな
Webページの作り方を伝授しますので、一緒にやってみましょう。^^♪
※すでにマニュアルとフォルダを別にご用意していますので、これは補足になります。 

画像ファイルと音声ファイルの準備

下準備として、用意するものが幾つかあります。

①鍵盤の画像
これはペイントツールを使ったり、GIMP,  Photoshop,  Pixlrなど好きなものを使って、準備します。

作るのが面倒でしたら、無料の画像をお使いください。（下記ダウンロードリンクがあります。）

出来上がったものを見て頂くのが一番分りやすいかと思うので、まずはこちらのご確認をお願いします⇒

https://good-inspiration.com/demo/sound/index.html（簡易バージョン）
https://good-inspiration.com/demo/cafe/index.html（アレンジバージョン）

② 音声ファイル
まず、アレンジバージョンの方ですが、音は専門家の魔王魂さんから拝借させて頂いています。

魔王魂：http://maoudamashii.jokersounds.com/
好きな曲（ピアノ音）を選んで、自分のパソコンにダウンロードして保存。

MP3やWAVに変換する為のサイト  :   http://media.io/ja/ 　でMP3（ファイル）に変換します。

Windowsユーザーの方は、WAVファイルの方がいいかも知れません。ご自分のパソコンにあったファイル形式にしましょう。

MacユーザーならMP3をお勧めします。

この下準備が出来たら、後はHTMLファイルを作ります。
HTMLファイルの書き出しは、覚えていますか？

YES！ もちろん？
NO！ なら前の記事に戻って、確認してみてください！^^ 

Audioタグを記述して音を鳴らす

準備ができましたら、次に以下ののソースを確認します。

1. htmlで音が出るファイルを作成しよう

audioタグは音楽ファイルを書くよという宣言文で、mp3やwavファイルを貼付ける為のタグです。

sourceとセットになっており、srcでリンク先を指定、typeでファイルの種類を指定しています。

 

2. JavaScriptを使って、クリックすると音が再生出来るようにしよう

画像ファイルの指定

 

3. ボタン画像を貼付けて本物っぽくして、クリックで音を鳴らす

４. コントロールバーを付ける

サンプルページ 

ピアノの鍵盤の画像は右クリックでDLできます => piano1 ,   piano2

 

練習用ファイルのダウンロードはこちら

 

出来上がると嬉しいものです。

あなたの成功をこころより祈っています！  ^ ^♪

最後までご覧頂き、ありがとうございました。