Question

我是网络编程的绝对菜鸟，我似乎无法在下面找到爆米花样本。我正在尝试从工作示例中实现它：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>

Answer 1

将所有自己的JavaScript代码包装在

中

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

或在</body>标记之后移动它，因此等到HTML主体加载后才会运行。

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

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

无法获得javascript爆米花样本

1 个答案: