0

我是网络编程的绝对菜鸟，我似乎无法让下面的爆米花示例正常工作。我正在尝试从这里的工作示例中实现它：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 正文加载后才运行。

onLoad当您在左上角设置下拉菜单时，jsFiddle 会自动执行此操作。

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

于 2013-02-06T21:09:23.700 回答