iOS - 只能点击一次html按钮

时间:2018-03-12 21:46:07

标签: javascript jquery ios iphone

我从一位颇受欢迎的德国农民那里创建了一个soundboard页面,里面有很多按钮。我注意到我的兄弟无法在他的苹果智能手机(iphone 7)上多次按下按钮。如果他再次按下相同的按钮,则不会播放声音。他甚至用chrome浏览器尝试过它,结果相同。在Windows手机和Android上,它的工作非常精细,同样适用于台式机。

这是一个编码错误还是与糟糕的iOS软件有关?

这是相关的代码。

按钮示例:

<button class="button" data-mp3-file="audio/favorit03.mp3">
    Hör auf hieeer!!
</button>
<button class="button" data-mp3-file="audio/favorit12.mp3">
    Hier wirst du verrückt du!
</button>

JavaScript的:

var allAudioFiles = [];

$(".button").each(function() {

    var audio = {};
    audio["id"] = $(this).data("mp3-file");
    audio["audioObj"] = new Audio($(this).data("mp3-file"));

    allAudioFiles.push(audio);
});

$(".button").click(function() {

    var id = $(this).data("mp3-file");
    var audio = $.grep(
        allAudioFiles, 
        function(e){ 
            return e.id === id; 
        }
    );
    var sound = audio[0].audioObj;
    sound.play();
});

1 个答案:

答案 0 :(得分:0)

试试这个

&#13;
&#13;
$(".button").click(function() {   
  document.getElementById('audioSource').src = $(this).data("mp3-file");
  var audio = document.getElementById('audio');
  audio.load();
  audio.play();
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" data-mp3-file="http://mattersofgrey.com/audio/Minecraft-purr1.mp3">test1</button>
<button class="button" data-mp3-file="http://mattersofgrey.com/audio/Minecraft-purr2.mp3">test2</button>
<button class="button" data-mp3-file="http://mattersofgrey.com/audio/Minecraft-purr3.mp3">test3</button>
<audio id="audio">
  <source id="audioSource" src="" type="audio/mpeg"></source>
  Your browser does not support the audio format.
</audio>
&#13;
&#13;
&#13;