点击图片在浏览器中听到声音

时间:2013-08-25 15:43:07

标签: javascript css

我正在创建一个网站。

我有很多网站/来源,可以去做我想做的事情。但他们的方式/步骤对我不起作用。

我有以下情况:

我在Dreamweaver中有2个cols。 1表示图像,右侧表示文本。

我希望用户点击图片并听到图片中人物的声音。 没有玩家或其他页面打开。点击图片并听到它的音频。

可以这样做。由于当前和唯一的例子似乎让我不确定:

http://www.it-student.org.uk/playsound/playsounds.php

我设置它,因为它没有任何声音没有发生。

<title>Untitled Document</title> 
<script> 
  function EvalSound(soundobj) { 
    var thissound= eval("document."+soundobj); 
    thissound.Play();
  } 
</script>
</head>
<body>
  <embed src="hannbil smith.mp3" autostart=false width=0 height=0 name="sound1" enablejavascript="true">
   <a href="#" onClick="EvalSound('sound1')"><img src="han cast.jpg""></a> 
</body> 
</html>

2 个答案:

答案 0 :(得分:0)

这可以使用jQuery轻松完成

DEMO jsFiddle

var manifest = [
    {id:"waiting", src:"http://stardotserver.co.uk/waiting2.ogg"}  
]
var preload = new createjs.LoadQueue()
preload.installPlugin(createjs.Sound)
preload.loadManifest(manifest)

$('img').on('click',function() {
    createjs.Sound.play("waiting", createjs.Sound.INTERRUPT_NONE, 0, 0, -1, .5)
});

答案 1 :(得分:0)

您至少需要关闭embed标记并从URL中删除空格。 EVAL也是EVIL。最后从onclick返回false

我给了它一个ID并使用了getElementById

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title> 
<script> 
  function evalSound(soundobj) { 
    var thissound=document.getElementById(soundobj); 
    thissound.Play();
    return false;
  } 
</script>
</head>
<body>
  <embed src="hannbil%20smith.mp3" autostart=false width=0 height=0 name="sound1" id="sound1" enablejavascript="true" />
   <a href="#" onclick="return evalSound('sound1')"><img src="han%20cast.jpg""></a> 
</body> 
</html>