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

[toc]

名付けて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. ボタン画像を貼付けて本物っぽくして、クリックで音を鳴らす

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

サンプルページ 

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

 

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

 

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

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

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

Liked Liked
No Comments