我想从列表中选择一首mp3并在html5中播放它

这是我的javascript代码和我的html代码。我似乎无法得到这个工作。玩家出现了，表格出现了，默认的教学，硬编码到播放器中。问题是，当我点击表格中的链接时，什么也没有发生。如果可能，请帮助我。我想从列表中选择一首mp3并在html5中播放它

在此先感谢您...顺便说一句我并不是真正精通javascript/jquery。我基本上从网络上的其他地方复制，试图使这项工作。

<html> 
    <head> 
     <script src="/scripts/jquery-1.10.2.min.js"></script> 
    </head> 
<body> 

<script> 
    function change(sourceUrl) { 
     var audio = $("player");  
     $("#mp3_src").attr("src", sourceUrl); 

     /****************/ 
     audio[0].pause(); 
     audio[0].load();//suspends and restores all audio element 
     audio[0].play(); 
     /****************/ 
    } 
</script> 


<audio id="player" controls="controls"> 
     <source id="mp3_src" src="/teachings/2011_01_09_Cut.mp3" type="audio/mp3" /> 
     Your browser does not support the audio element. 
</audio> 



<table> 
    <tr> 
     <th align="left">Date</th> 
     <th align="left">Teacher</th> 
     <th align="left">Topic</th> 
     <th align="left">Listen</th> 
    </tr> 
    <tr> 
     <td>November 17th</td> 
     <td>Pastor Bill Van Wey</td> 
     <td>Prayer James Part 15</td> 
     <td><a href="#" onclick="change('/teachings/2013_11_17_Cut.mp3');">Listen</a></td> 
    </tr> 
    <tr> 
     <td>November 23rd</td> 
     <td>Pastor Bill Van Wey</td> 
     <td>Prayer James Part 16</td> 
     <td><a href="#" onclick="change('/teachings/2013_11_24_Cut.mp3');">Listen</a></td> 
    </tr> 
</table> 
    </body> 
</html>

来源

2014-02-10 Joecvc

我希望它会帮助你：

小提琴：http://jsfiddle.net/rUf6j/

HTML摘录：

<tr> 
    <td>November 17th</td> 
    <td>Pastor Bill Van Wey</td> 
    <td>Prayer James Part 15</td> 
    <td><a href="#" source="http://www.culturedub.com/assets/04-Forward.mp3">Listen</a></td> 
</tr>

JS：

$(document).ready(function(){ 

    $('[source]').on('click', function(){ 
     change($(this).attr('source') ); 
    }); 

}); 

function change(sourceUrl) { 
     var audio = $("player");  
     $("#mp3_src").attr("src", sourceUrl); 

     /****************/ 
     $('audio').get(0).pause(); 
     $('audio').get(0).load();//suspends and restores all audio element 
     $('audio').get(0).play(); 
    }

更新后评论：

如果你愿意，你可以替换

<a href="#" source="http://www.culturedub.com/assets/04-Forward.mp3">Listen</a>

通过

<span source="http://www.culturedub.com/assets/04-Forward.mp3">Listen</span>

$('[source]')（jQuery选择）意味着它选择具有元素'源'属性。

所以当我们点击一个有source属性的东西时，它会运行change函数。

change函数在参数中调用'source'。

所以它取代src属性的<audio>标签，并重新开始播放。

来源

2014-02-10 21:17:38 pbenard

谢谢。是的，我可以看到这在小提琴上起作用。问题在于它根本没有使用任何java来真正播放文件。我不明白这是如何工作的，只有链接到锚标签中的文件。所以＃号将带你到同一页面的顶部，并重新加载它，然后java会触发？是对的吗？ – Joecvc

我试图解释更新答案。 – pbenard

你绝对不需要JQuery。事实上，它的用途可能是现在让你搞砸的东西。

只需获取id中的元素并通过其手柄更改它们即可获得相同的结果。

function change(sourceUrl) { 
    var audio = document.getElementById("player"), 
      source = document.getElementById("mp3_src"); 
    source.src = sourceUrl; 
    audio.pause(); 
    audio.load(); 
    audio.play(); 
}

编辑

正如保罗在评论中说，是的，你没有，如果你走这条路线需要JQuery的。有一整套函数可以让你搜索DOM中的元素，包括getElementById()，它们几乎可以在所有浏览器中使用。对于大多数，因为他们被释放。对于IE，自5.5 MDN getElementById。

不要误解我的意思，我发现JQuery对大型和小型项目都非常有用，这些项目需要跨越许多浏览器类型，包括新旧版本。这是它的美丽，它处理你的所有特质。例如，它包含了如何将事件监听器添加到可能会有所不同的元素，因为IE使用attachEvent而不是addEventListener直到IE 8。但是，您不必包含整个库，只需执行简单操作即可搜索DOM中的元素。

来源

2014-02-10 21:21:00 zero298

谢谢，这工作绝对奇妙。我不需要改变任何东西，只需要一点点java。我的问题是，我认为GetElementById是jQuery的一个函数？我想我对此有点困惑。这是否也意味着我不必包含jquery引用。它只是直的JavaScript？ – Joecvc

“我不需要改变任何东西，只需要一点点java”Java * Script *“。 Java是一种不同的语言。 “我以为GetElementById是jquery的一个功能？”不。 “这是否也意味着我不必包含jquery参考”是的。 –

非常有帮助，我一直在试图弄清楚所有这一切，一直在我的头靠在桌子上。我现在了解这两个流程/解决方案，并对如何使用它们有点自信。谢谢大家的帮助。 – Joecvc

我想从列表中选择一首mp3并在html5中播放它

回答

相关问题