使用jQuery.each()无法播放音频

时间:2014-09-15 10:59:39

标签: jquery audio each

我正在尝试将与特定单词相关联的音频文件连续播放,同时播放音频时单个单词为hilited,并且事件之间有短暂的延迟。我希望对页面中的每个单词重复此过程。这是html的一部分:

    <p id="pathVar">/templates/beez_20/audio/word_sets/word_set1/</p>
    <p class="wordSetNum">1</p>
    <div id="word_learning">
      <p id="title">Word Learning 1</p>
      <div id="centering">     
        <div id="left_col"> 
          <p class="word_learn">1<span class="color_up audio" id="b1e1">the</span> คำนำหน้านามเจาะจง </span></p>
          <p class="word_learn">2<span class="color_up audio" id="b1e2">and</span>    และ </span></p>
          <p class="word_learn">3<span class="color_up audio" id="b1e3">of</span>       ของ </span></p>
          <p class="word_learn">4<span class="color_up audio" id="b1e4">to</span>       ถึง </span></p>
          <p class="word_learn">5<span class="color_up audio" id="b1e5">a</span>        หนึ่ง </span></p>

等。这是js:

    "use strict";
    jQuery.noConflict();
    jQuery(document).ready(function() { 
    alert("1st");
      jQuery("div#word_learning").click(function (evnt) {
      alert("2nd");
        var  pathVar = document.getElementById("pathVar").innerHTML,
          setNum = document.getElementById("setNum").innerHTML, 
          audioElement = document.createElement("audio"),
          audioType = Modernizr.audio.ogg? ".ogg": ".mp3";
        jQuery("p.word_learn").each(function(i)  {
          jQuery(this).css("color : red;");
          audioElement.src = pathVar+"b"+setNum+"e"+i+audioType;
          jQuery(this).delay(250);
          audioElement.load();    
          audioElement.play();     
          jQuery(this).delay(500);
          jQuery(this).css("color : black;");
        });
      });
    });

加载页面时会显示第一个警报,但是当单击列表中的初始单词时,第二个警报不会显示。我将不胜感激任何帮助。在

0 个答案:

没有答案