0

私はWebプログラミングの初心者であり、以下のポップコーンサンプルを機能させることができないようです。私はここでの作業例からそれを実装しようとしています：http：//jsfiddle.net/thisgeek/At3xg/

誰かが私が間違っていることを見つけてくれませんか？以下のコードの音声に合わせて単語が強調表示されていないことに注意してください。ただし、jfiddleの例では強調表示されています。

ありがとう！

<html>
     <head>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>


       <script>
             var pop = Popcorn("#greeting");

            var wordTimes = {
                "w1": { start: 1, end: 1.5 },
                "w2": { start: 1.9, end: 2.5 },
                "w3": { start: 3, end: 4 }
            };

            $.each(wordTimes, function(id, time) {
                 pop.footnote({
                    start: time.start,
                    end: time.end,
                    text: '',
                    target: id,
                    effect: "applyclass",
                    applyclass: "selected"
                });
            });

            pop.play();

            $('.word').click(function() {
                var audio = $('#greeting');
                audio[0].currentTime = parseFloat($(this).data('start'), 10);
                audio[0].play();
            });
       </script>  

        <style>
       .word {
           color: red;
        }
        .word:hover, .word.selected {
            color: blue;
            cursor: pointer;
        }
       </style>    
     </head>

     <body>
        <audio id="greeting" src="http://dl.dropbox.com/u/17154625/greeting.ogg" controls></audio>

        <div id="text">
           <span id="w1" class="word" data-start="1.0">Hello</span>,
           and <span id="w2" class="word" data-start="2.0">welcome</span>
           to Stack <span id="w3" class="word" data-start="3.0">Overflow</span>.
           Thank you for asking your question.
        </div>
     </body>
   </html>
4

1 に答える 1

1

独自のJavaScriptコードをすべて内部にラップする

$(document).ready(function() { /* your code here */ });

または、</body>タグの後に移動して、HTML本文が読み込まれるまで実行を待機します。

jsFiddleは、onLoad左上隅にドロップダウンを設定すると、これを自動的に実行します。

http://api.jquery.com/ready/

于 2013-02-06T21:09:23.700 に答える