点击图片时播放声音文件

Question

点击图片时播放声音文件

8

我不是一名本地的HTML程序员，所以请不要在这个简单问题上过于苛刻。

我有一张图片，我正在使用以下代码来显示它：

 <img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />

我希望在单击该图像时播放声音文件。我可以将图像设置为按钮，但由于某种原因，这会破坏页面的布局。

我可以使用任何播放器，但唯一的要求是不要显示冗长的播放器。我只想让用户按下图像并听到音乐。如果他按下另一个图像，则当前音乐需要停止播放，并播放不同的声音。

请帮忙！谢谢！

- Prajoth

你可以使用html5音频标签，并利用JavaScript在单击后启动它。 - Neysor

可能是重复问题：https://dev59.com/LWoy5IYBdhLWcg3wiegp - Victor

3个回答

5

这个回答由 @klaustopher 提供，对我很有帮助。他写道：

HTML5 has the new -Tag that can be used to play sound. It even has a pretty simple JavaScript Interface:
  <audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
  <button onclick="document.getElementById('sound1').play();">Play
  it</button>

以下是我如何实现他的建议，使得在网页上点击 Font Awesome 图标 "fa-volume-up"（位于 "mule." 之后）会导致播放 "donkey2.mp3" 声音（注意：mp3 并不在所有浏览器中都能播放）：

<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>

- Mark Gavagan

0

<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>

<script>
        $(document).ready(function() {
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'audio.mp3');
            audioElement.setAttribute('autoplay', 'autoplay');
            //audioElement.load()

            $.get();

            audioElement.addEventListener("load", function() {
                audioElement.play();
            }, true);

            $('.play').click(function() {
                audioElement.play();
            });

            $('.pause').click(function() {
                audioElement.pause();
            });
        });
    </script>

- Suresh Pattu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alfred · Accepted Answer

首先，您需要使用jQuery。

您可以在页面中创建一些具有id的

元素，例如：

<div id="wrap"> </div>

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

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

整段代码看起来像这样：

<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>

希望这可以帮助到您。