在网页中添加背景音乐
在网页中添加背景音乐
提问于 2016-04-21 13:40:42
所以，我对这件事有些意见。简单地说，我想在我的网页上有一个播放按钮，它同时播放两个文件。这些文件是Jazz.ogg和Jazz.mp3，Rain.ogg和Rain.mp3。HTML中的play按钮被放置如下；
<div class="play">
<img src="play.png" style="height: 100%; width: 100%;">
</div>
我有一些HTML和CSS方面的经验，但在Javascript方面，我和字体扩展元素一样有用。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-21 13:51:24
这是一个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文件添加正确的路径。
Stack Overflow用户
发布于 2016-04-21 14:02:34
像这样的东西应该对你有用：
<!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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36771439
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号