添加背景音乐网页

问题描述 投票:2回答:2

所以,我已经受够了这一些问题。简单地说,我想在我的网页上,其同时放扮演了两个文件,一个播放按钮。这些文件是Jazz.oggJazz.mp3Rain.oggRain.mp3。在HTML的播放按钮放在如;

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

我有一点HTML和CSS的经验,但是当涉及到JavaScript中,我尽可能多的使用作为字体拉伸元素。

javascript html css
2个回答
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文件。


0
投票

像这样的东西应该为你工作:

<!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

© www.soinside.com 2019 - 2024. All rights reserved.