2017
07.06

【HTMLファイル付き】CreativeなピアノをWebページで表現する

HTML, HTML5

名付けてWeb Piano!

今回はタイトルからも判って頂けるように、音も出せるクリエィティブな
Webページの作り方を伝授しますので、一緒にやってみましょう。^^♪

※すでにマニュアルとフォルダを別にご用意していますので、これは補足になります。

 

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

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

①鍵盤の画像

これはペイントツールを使ったり、pixlrを使っても良いでしょう。

作るのが面倒でしたら、無料の画像を使ってもいいでしょう。(下記ダウンロードリンクがあります。)

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

http://yukycohamabe.ciao.jp/demo/sound/index.html  (簡易バージョン)

http://yukycohamabe.ciao.jp/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

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

お役に立てる事を祈って・・・  ^ ^♪

最後までお読みくださりありがとうございました!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。