在按钮上单击移动设备播放HTML音频

时间:2017-12-21 04:14:53

标签: javascript html audio

我正在尝试用HTML制作一个简单的键盘。我理解在iOS上播放HTML音频和android有一些限制,我在使用它们时遇到了麻烦。

以下是我到目前为止的内容,第一列基于here的清单11,第二列是我之前的尝试。它们都可以在桌面(Firefox和Chrome)上完美运行,但不能在iOS(Chrome和Safari)上运行。我没有安卓程序来测试它。我如何使这项工作?

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body onload="loadScript();"style="background-color:#000000;">

  <script>
  function loadScript()
  {
    alert("ok");
    var button = document.getElementById('buttonD');
    var audio = document.getElementById('D');

    var onClickD = function() {
      audio.pause();
      audio.currentTime = 0;
      audio.play();
    };
    button.addEventListener('click', onClickD, false);
  }
  </script>

  <audio id="A" src="A.wav" preload="auto"></audio>
  <audio id="D" src="D.wav" preload="auto"></audio>


  <div class="row">
    <div class="col-md-6 col-sm-6 clickable">
      <button id="buttonD" style="height:100%;width:100%;"type="button" class="btn btn-primary">D</button>
    </div>
    <div class="col-md-6 col-sm-6 clickable">
      <button type="button"  onclick="document.getElementById('A').pause;document.getElementById('A').currentTime = 0;document.getElementById('A').play();" style="height:100%;width:100%;"type="button" class="btn btn-success">A</button>
    </div>

  </div>
</body>

1 个答案:

答案 0 :(得分:0)

您可以将HTML代码运行到webview中。因此,使用webview获取HTML代码可以帮助您播放HTML音频。

使用其他音频文件更改A.wav并尝试。

<audio id="A" src="phonecall.mp3" preload="auto"></audio>
<audio id="D" src="phonecall.mp3" preload="auto"></audio>