所以,我已经受够了这一些问题。简单地说,我想在我的网页上,其同时放扮演了两个文件,一个播放按钮。这些文件是Jazz.ogg
与Jazz.mp3
和Rain.ogg
与Rain.mp3
。在HTML的播放按钮放在如;
<div class="play">
<img src="play.png" style="height: 100%; width: 100%;">
</div>
我有一点HTML和CSS的经验,但是当涉及到JavaScript中,我尽可能多的使用作为字体拉伸元素。
这是一个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文件。
像这样的东西应该为你工作:
<!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