Fatal编程技术网
  • javascript/
  • Javascript 单击图像时播放声音文件

Javascript 单击图像时播放声音文件

javascript html

Javascript 单击图像时播放声音文件,javascript,html,playback,background-music,Javascript,Html,Playback,Background Music,我不是本地的HTML程序员，所以请不要为这个简单的问题对我发火 我有一个图像，我正在使用以下代码显示： <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" /> 我想要一个声音文件被播放时，图像被点击。我可以把图片做成一个按钮，但由于某种原因，这会弄乱页面的布局 我可以使用任何球员，但唯一的问题是，我不想显示一个侵入性的球员。我只想让

我不是本地的
HTML
程序员，所以请不要为这个简单的问题对我发火

我有一个图像，我正在使用以下代码显示：

 <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
我想要一个声音文件被播放时，图像被点击。我可以把图片做成一个按钮，但由于某种原因，这会弄乱页面的布局

我可以使用任何球员，但唯一的问题是，我不想显示一个侵入性的球员。我只想让用户按下图像并听到音乐。如果他按下另一个图像，当前音乐需要停止播放，必须播放不同的声音

请帮忙！谢谢

首先，您必须使用。 例如，您可以在页面中创建一些具有某些id的

然后，在JavaScript中，当您想要播放文件时，只需添加

$('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');

$（'#wrap'）。附加（''）；
整个代码看起来像

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track1').click(function(){
   $('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
<div id="wrap">&nbsp;</div>


$（文档）.ready（函数（）{
$（'#track1'）。单击（函数（）{
$（'#wrap'）。追加（''）；
});
});
希望这有帮助。



<html>    
    <body>
        <div id="container">
             <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" class="play" />
        </div>
    </body>
</html>





$（文档）.ready（函数（）{
var audioElement=document.createElement（'audio'）；
setAttribute（'src'，'audio.mp3'）；
setAttribute（'autoplay'，'autoplay'）；
//audioElement.load（）
$.get（）；
audioElement.addEventListener（“加载”，函数（）{
audioElement.play（）；
}，对）；
$（'.play'）。单击（函数（）{
audioElement.play（）；
});
$（'.pause'）。单击（函数（）{
audioElement.pause（）；
});
});
作者@帮助了我。他写道：

HTML5有一个新的标签，可以用来播放声音。它甚至有一个非常简单的JavaScript界面：

  <audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
  <button onclick="document.getElementById('sound1').play();">Play
  it</button>


玩
信息技术
下面是我如何实现他的建议的：点击字体很棒的图标“fa volume up”（位于网页“mule.”之后）会播放“donkey2.mp3”声音（注意：mp3不会在所有浏览器中播放）：

简而言之，你被当作一个完整的人，而不是一头租来的骡子。

您可以使用和使用javascript在单击“可能的重复”后启动它：我确实喜欢这个解决方案，但javascript标记说明说“除非还包含框架/库的另一个标记，否则应该包含纯javascript答案。”也许这是对纯javascript答案的一个很好的补充。 
  <audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
  <button onclick="document.getElementById('sound1').play();">Play
  it</button>

<p>In short, you're treated like a whole person, instead of a rented mule. 
<audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio>
<a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a></p>