Question

这是我播放html5音频的代码（不起作用）

$('img.play_media').bind('click',function(){
src=$(this).attr("id");                     $('audio[id=resource_audio]').children('source').attr("src","testuser/resources/"+src);
var audio= document.getElementById('resource_audio');
audio.play();
return false;
});

<audio id="resource_audio" >
<source src="" type="audio/mp3" />
</audio>

正如你所看到的，我试图在img点击上获得src，这是设置为图像ID，在歌剧中我可以看到播放开始。但是，音频不播放。任何帮助表示赞赏感谢。

Answer 1

请提供img的HTML。我已经清理了一些代码，但可能无法解决您的问题：

$('img.play_media').click(function(event){
  $("#resource_audio")
    .attr("src","testuser/resources/"+this.id)
    .get(0).play();
});

<audio id="resource_audio">
  Your browser does not support the <code>audio</code> element.
</audio>

注意：确保两件事：a）音频文件实际位于正确的位置; b）Web服务器配置为使用正确的MIME类型提供（响应）。

您可能还想查看https://developer.mozilla.org/en/HTML/Element/audio。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
    <h1>Heading</h1>
    <div id="doc">
        <img class="play_media" id="test.mp3" src="status-on.png" style="width:15px;margin-right:0%;" > 
        <audio id="resource_audio">
          Your browser does not support the <code>audio</code> element.
        </audio>
    </div>
    <script>
    $('img.play_media').click(function(event){
      $("#resource_audio")
        .attr("src",this.id)
        .get(0).play();
    });
    </script>
</body>
</html>

Answer 2

我可以让它工作，除非源标签已经有一个绑定的声音： http://jsfiddle.net/webwarrior/b2cUz/22/

您需要更新音频的源属性，而不是源。

重要的一点是：jQuery('#resource_audio').attr("src",srclink)[0].play();

但是这个家伙似乎让它发挥作用：http://css-tricks.com/play-sound-on-hover/

希望这能指出你正确的方向。

更改图像上的html5音频源点击并播放它

2 个答案: