8

我不是本地HTML程序员,所以请不要为这个简单的问题跳来跳去。

我有一张图片,我正在使用以下代码显示:

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

我希望在单击该图像时播放声音文件。我可以使图像成为按钮,但由于某种原因,这会弄乱页面的布局。

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

请帮忙!谢谢!

4

3 回答 3

5

首先你必须使用jQuery。例如,您可以在您的页面中创建一些<div>具有某些 id 的内容;

<div id="wrap">&nbsp;</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>

希望这可以帮助。

于 2012-04-10T07:10:51.257 回答
5

@ klaustopher的这个回答帮助了我。他写了:

HTML5 有新的 -Tag 可以用来播放声音。它甚至有一个非常简单的 JavaScript 接口:

  <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>
于 2015-09-26T18:24:07.400 回答
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>
于 2013-11-05T04:44:38.223 回答