Question

我是html / js领域的全新手。我需要创建一个包含17张图片的非常基本的界面。点击时每一个都播放给定的声音。

经过数天的修补和寻找正确的方法后，我设法创造了一些有效且看起来不错的东西，但有一个小问题。

当触发一个音频样本时，单击另一个图片应停止并重置前一个图片。我在这个网站上发现了很多例子，但是我对js语法的理解很少，我无法正确实现它。

感谢您的帮助。

以下是我所拥有的：

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('#track1').click(function() {
        $('#1').append('<embed id="1" src="content/mp3/01.mp3" autostart="true" hidden="true"></embed>');
    });
});
</script>
<img name="track1" src="content/img/01.jpg" width="180" height="180"   border="0" id="track1" alt="" />
<div id="1">&nbsp;</div>

我非常感谢你的帮助。

Answer 1

我从链接你的帖子中清理了一下。尝试一下，看看它是否允许您播放和停止音频。

$scope.$watch('temp', function(newType, oldType) {
    $scope.Prop.TestTemplateId = newType.Id;
});

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'content/mp3/01.mp3');
 
    $('#track1').click(function() {
        audioElement.pause();
        audioElement.currentTime = 0;
        audioElement.play();
    });
});

Answer 2

也许，为了更清楚，我发布了更多的代码。整个网站包含完全相同的＆＃34;模块＆＃34;乘以17倍。它看起来如下：

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track4').click(function(){
$('#4').append('<embed id="4" src="content/mp3/04.mp3" autostart="true"     hidden="true"></embed>');
});
});
</script>
<img name="track4" src="content/img/04.jpg" width="180" height="180"  border="0" id="track4" alt="" />
<div id="4">&nbsp;</div>   

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track3').click(function(){
$('#3').append('<embed id="3" src="content/mp3/03.mp3" autostart="true"  hidden="true"></embed>');
});
});
</script>
<img name="track3" src="content/img/03.jpg" width="180" height="180"    border="0" id="track3" alt="" />
<div id="3">&nbsp;</div>

如何使用jQuery防止多个音频文件同时播放？

2 个答案: