Question

所以，我对此有一些问题。简单地说，我想在我的网页上有一个播放按钮，可以同时播放两个文件。这些文件为Jazz.ogg Jazz.mp3和Rain.ogg Rain.mp3。 HTML中的播放按钮如：

＆＃13;

<div class="play">
  <img src="play.png" style="height: 100%; width: 100%;">
</div>

＆＃13;

我对HTML和CSS有一些经验，但是当谈到Javascript时，我和font-stretch元素一样多用。

Answer 1

这是一个html5解决方案。只有在您点击play图片后才能播放音乐。

<body>
    <script>
    function playMusic() {
        var jazzMusic = document.getElementById("audio-jazz");
        jazzMusic.play();

        var rainMusic = document.getElementById("audio-rain");
        rainMusic.play();
    }
    </script>

    <div class="play">
       <img src="play.png" style="height: 100%; width: 100%;" onclick="playMusic();">
    </div>
    <audio id="audio-jazz" src="Jazz.ogg"></audio>
    <audio id="audio-rain" src="Rain.ogg"></audio>
</body>

确保为 .ogg 文件添加正确的路径。

Answer 2

这样的事情对你有用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin audio test</title>
</head>
<body>
  <div id="play">
   <img src="play.png" style="height: 100%; width: 100%;">
  </div>
  <audio id="audio-jazz">
    <source src="jazz.ogg" type="audio/ogg">
    <source src="jazz.mp3" type="audio/mpeg">
  </audio>
  <audio id="audio-rain">
    <source src="rain.ogg" type="audio/ogg">
    <source src="rain.mp3" type="audio/mpeg">
  </audio>
  <script>
    var playButton = document.getElementById('play');
    var rainAudio = document.getElementById('audio-rain');
    var jazzAudio = document.getElementById('audio-jazz');

    playButton.onclick = function(){
      rainAudio.play();
      jazzAudio.play();
      return false;
    };
  </script>
</body>
</html>

以下是一个工作（简化）示例：https://jsbin.com/yikifozedi/1/edit

将背景音乐添加到网页

2 个答案: