質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

押された要素のinnerHTMLを取得して音を鳴らしたい。(タップ/キーボード入力/和音対応)

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,338

-1an.vvks-

score 71

[√] クリックされたら要素のinnerHTMLに合わせて音を鳴らしたい

やりたいこと

  • class="key"の要素がクリックされたら、押された要素自身の直下子要素(今回はdiv)のinnerHTMLを取得し、変数selectedkeyに代入。
  • index.htmlからの相対URLが「 "sound/piano" + selectedkey + ".ogg"」の音を鳴らす。
  • 押されている間は鳴らし続ける。
  • さらに和音(同時複数入力)対応。
  • キーボード入力対応。

現状↓ ここからどうやったら良いのか分からず停滞中

<!DOCTYPE html>

<html lang="ja">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style>

            /*cmn*/
            @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300');

            *,
            *::before,
            *::after{
                padding:0;
                margin: 0;
                box-sizing: border-box;
                -webkit-tap-highlight-color:rgba(0,0,0,0);
            }

            a,
            a:link,
            a:visited{
                text-decoration: none;
                margin: 0.1em;
                border: 1px solid #ddd;
            }

            li{list-style-type: none;}

            p::before{ content: "\0020\0020"; white-space: pre;}
            p{word-wrap: break-word;}

            img{
                max-width: 100%;
                pointer-events: none;
            }

            .typography span{
                white-space: pre;
            }
            html{
                font-size: 17px;
            }
            body{
                position: relative;
                width: 100vw;
                min-height: 100vh;
                overflow-x: hidden;
                font-family: 'Roboto Mono', sans-serif;
            }

            p{
                font-size: 15px;
                margin: 20px 100px;
                padding: 10px;
                border: 1px solid #ddd;
            }

            aside{
                margin: 10px 50px;
                padding: 10px;
                border: 1px solid #aaa;
                border-radius: 5px;
            }

            #keyboard{
                position: relative;
                text-align: center;
                border: 1px solid #ddd;
                user-select: none;
            }

            .key{
                position: relative;
                display: inline-block;
                width: 50px;
                height: 240px;
                border: 1px solid #777;
                border-radius: 0 0 3px 3px;
                margin: 10px 1px;
                cursor: pointer;
            }
            .key> div{
                position: absolute;
                left: 0;
                bottom: 5.5%;
                width: 100%;
                text-align: center;
                border-bottom: 1px solid #777;
                border-radius: 0 0 3px 3px;
            }
            .key:active> div{
                bottom: 3.5%;
            }
            .black{
                position: absolute;
                top: 0;
                z-index: 1;
                margin-left: -25px;
                color: #fff;
                height: 150px;
                background: #555;
                border: 1px solid #444;
            }

        </style>

        <title>piano</title>
    </head>

    <body>

        <h1>piano</h1>
        <ul id="keyboard"><!--
            □ド--><li class="key"><div>C4</div></li><!--
            ■ド#--><li class="key black"><div>C#4</div></li><!--
            □レ--><li class="key"><div>D4</div><!--
            ■レ#--><li class="key black"><div>D#4</div></li><!--
            □ミ--><li class="key"><div>E4</div></li><!--
            □ファ--><li class="key"><div>F4</div></li><!--
            ■ファ#--><li class="key black"><div>F#4</div></li><!--
            □ソ--><li class="key"><div>G4</div></li><!--
            ■ソ#--><li class="key black"><div>G#4</div></li><!--
            □ラ--><li class="key"><div>A4</div></li><!--
            ■ラ#--><li class="key black"><div>A#4</div></li><!--
            □シ--><li class="key"><div>B4</div></li>
        </ul>

        <script>
            //クリック・タップ受付
            var selectedkey = document.getElementsByClassName('key');

            selectedkey[0].addEventListener('click', function () {

                audio = new Audio('  ');
                audio.play();
            }, false);

            //キー入力受付
            function keyInput(event) {
                var key_event = event || window.event;
                var key_any = key_event.keyCode;
            }
        </script>
    </body>

</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2017/04/28 23:11

    質問が多すぎるので分割した方がよいのではないでしょうか。innerHTMLの取得の方法が分からないのであれば、まずそこから始めるべきでしょう。

    キャンセル

回答 1

checkベストアンサー

+2

キーダウンやマウスダウンで音を鳴らし、
キーアップやマウスアップで音を止めればいいです。

        <script>
            var sounds = {
                // sound : audio obj
                "C4"  : new Audio('音源ファイル'),
                "C#4" : new Audio('以下同じ'),
                "D4"  : new Audio(),
                "D#4" : new Audio(),
                "E4"  : new Audio(),
            };

            //クリック・タップ受付
            document.getElementById('keyboard').addEventListener('mousedown', function(event) {
                var sound = event.target.innerText;

                if (sound in sounds) {
                    sounds[sound].currentTime = 0;
                    sounds[sound].play();
                }
            });

            document.getElementById('keyboard').addEventListener('mouseup', function(event) {
                var sound = event.target.innerText;

                if (sound in sounds) {
                    sounds[sound].pause();
                }
            });

            //キー入力受付
            var charSoundBinders = {
                // key : sound
                "z" : "C4",
                "s" : "C#4",
                "x" : "D4",
                "d" : "D#4",
                "c" : "E4",
            };

            document.onkeydown = function (event) {
                var sound = charSoundBinders[String.fromCharCode(event.keyCode).toLowerCase()];
                if (sound in sounds) {
                    sounds[sound].currentTime = 0;
                    sounds[sound].play();
                }
            };
            document.onkeyup = function (event) {
                var sound = charSoundBinders[String.fromCharCode(event.keyCode).toLowerCase()];
                if (sound in sounds) {
                    sounds[sound].pause();
                }             
            };     
        </script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/20 18:57

    ありがとうございます!

    とりあえず音はなるようになったので,Lhankor_Mhyさんの言う通り,続きは別質問としてやろうと思います.
    現状はこちら[ https://thimbleprojects.org/-lanwks-/275561/from20170520/index.html ]

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る