1

朋友们，

我基本上是在尝试构建一个简单的音频播放器，它可以获取单击的图像的 id 并播放相应的音频文件。这就是我所在的地方......没有运气。

几个小时以来，我一直在努力寻找一种优雅的方式来做到这一点，并且非常感谢您的帮助！

谢谢！

<script type="text/javascript"> 
$(function() {
    $(".playback").click(function(){
        var selectedAudio = $(this).attr("id");
        var myAudio = document.getElementById(selectedAudio);
        myAudio.play();
});
</script>


<body>
    <audio id="boardroom" preload="auto"><source src="boardroom.mp3" type="audio/mpeg" /></audio>
    <audio id="bathroom" preload="auto"><source src="bathroom.mp3" type="audio/mpeg" /></audio>
    <audio id="livingroom" preload="auto"><source src="livingroom.mp3" type="audio/mpeg" /></audio>

    <img class="playback" id="boardroom" src="images/audio.png">


</body
4

2 回答 2

1

您正在寻找对“播放”类的点击，但您的图像具有“播放”类

可能是这样

于 2012-12-01T00:32:23.813 回答
1

2 件事。

  1. 永远不要id在文档中的多个元素上使用相同的元素。它们应该是唯一的，当它们不是唯一的时候可能会发生坏事。在您的情况下，您的图像和音频元素共享相同的 id，这很糟糕。document.getElementById如果多个元素共享一个 ID，如何知道要查找哪个元素？您需要使它们不同，尽管您仍然可以使用其中一个来找到另一个。 <img id="somename">和<audio id="somename-audio">，例如。

  2. 您小提琴中的音频源没有指向音频文件。它指向一个关于音频文件的网页。我修复了指向实际音频文件的链接。

工作版本：http: //jsfiddle.net/Pzsax/2/

html:

<audio id="cello-audio" preload="auto">
    <source src="http://upload.wikimedia.org/wikipedia/commons/4/43/JOHN_MICHEL_CELLO-J_S_BACH_CELLO_SUITE_1_in_G_Prelude.ogg" type="audio/mpeg" />
</audio>

<img class="playback" id="cello" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Sound-icon.svg/50px-Sound-icon.svg.png">​

JS：

$(".playback").click(function() {
    var selectedAudio = $(this).attr("id");
    var myAudio = document.getElementById(selectedAudio + "-audio");
    myAudio.play();
});​

或者，由于您似乎在使用 jQuery，那可能只是：

$(".playback").click(function() {
    var selectedAudio = $(this).attr("id");
    var myAudio = $('#' + selectedAudio + "-audio");
    myAudio.play();
});​

最后，与其依靠 id 来传递有意义的数据，也许数据属性可能是一种更简洁的方法，它允许您在播放它们的按钮中编码数据位，例如声音的名称。

于 2012-12-01T09:56:36.030 回答