Home/ Questions/Q 9254235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:25:00+00:00

I’m an absolute noob to web programming, and I can’t seem to get the

  • 0

I’m an absolute noob to web programming, and I can’t seem to get the popcorn sample below working. I’m trying to implement it from the working example here: http://jsfiddle.net/thisgeek/At3xg/

Can someone please spot what im doing wrong? Notice the words don’t highlight in time with the audio in the code below, but they do on the jfiddle example.

Thanks!

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Wrap all your own JavaScript code inside 

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

    or move it after the </body> tag, so it waits to run until after the HTML body has loaded.

    jsFiddle does this automatically when you set the onLoad dropdown in the top-left corner.

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

    • 0