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

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();
 }

编辑

正如Paul在评论中所说，是的，如果您走这条路线，则不需要JQuery。 有一系列的函数可以让您搜索DOM中的元素，包括getElementById()并且这些元素在几乎所有浏览器中都可用。 对于大多数人而言，自发布以来。 对于IE，自5.5 MDN getElementById开始。

别误会，我发现JQuery对于大型和小型项目都非常有用，这些项目需要跨越许多新旧的浏览器类型。 那就是它的美，它可以为您处理所有特质。 例如，它包装了如何将事件侦听器添加到元素上，这些元素可能会发生变化，因为IE在IE 8之前使用的是attachEvent而不是addEventListener 。但是，您不必包括整个库就可以对诸如在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属性的内容时，它将运行change功能。

使用参数' source '调用change函数。

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

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

问题描述

2 个解决方案

解决方案1
1 2014-02-10 21:21:00

解决方案2
0 已采纳 2014-02-10 21:17:38

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

问题描述

2 个解决方案

解决方案1 1 2014-02-10 21:21:00

解决方案2 0 已采纳 2014-02-10 21:17:38

解决方案1
1 2014-02-10 21:21:00

解决方案2
0 已采纳 2014-02-10 21:17:38