Question

这是我的javascript代码和我的html代码。我似乎无法让这个工作。播放器显示，表格显示，默认教学，硬编码到播放器中的播放。问题是当我点击表格中的链接时没有任何反应。请尽可能帮助我。

提前谢谢...顺便说一句，我对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>

Answer 1

你绝对不需要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中搜索元素。

Answer 2

我希望它会对你有所帮助：

小提琴： 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'属性的元素。

因此，当我们点击具有source attr的内容时，它会运行change函数。

使用参数中的“change”调用source函数。

因此，它会替换src标记的<audio>属性，然后重新开始播放。

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

2 个答案: