2012-08-03 105 views
1

这是我玩HTML5音频(不工作)改变图像点击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> 

正如你所看到的代码,我试图让src上IMG点击,这是设置为图像ID和歌剧我可以看到播放开始。但是,音频不播放。任何帮助表示赞赏。
谢谢。

+0

对不起,代码格式编辑了两次,但似乎没有成功。通过这种方式,这整个jquery代码是在另一个功能,但我相信问题是这部分只。 – user1542 2012-08-03 00:24:06

+0

尝试:jQuery('#resource_audio')。attr(“src”,srclink)[0] .play(); – ShaunOReilly 2012-08-03 01:03:09

+0

感谢分配它的工作.. – user1542 2012-08-03 01:26:17

回答

0

请提供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> 
  • 注:使两件事情肯定的:一)音频文件实际上是在正确的位置,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> 
+0

感谢清洗那。 – user1542 2012-08-03 00:30:52

+0

看到我上面的编辑。 – 2012-08-03 00:44:17

+0

是音频文件位于正确位置并且服务器也已配置。我尝试播放音频,给它一个静态的来源,它的工作。它只有这个代码不起作用 – user1542 2012-08-03 00:47:22

0

我能得到它的工作,除非源代码已经有了,它绑定到一个声音: http://jsfiddle.net/webwarrior/b2cUz/22/

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

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

不过这家伙似乎得到它的工作:http://css-tricks.com/play-sound-on-hover/

希望这点你在正确的方向。

+0

var audio = document.getElementById('resource_audio'); audio [0] .play(); 你的意思是这个..tried没有工作。我上传的.php文件 – user1542 2012-08-03 01:12:16

+0

是的是的是的,它的工作,你真棒。非常感谢 – user1542 2012-08-03 01:23:04

+0

希望我得到一些投票! – ShaunOReilly 2012-08-03 05:01:14