将背景音乐添加到网页
Posted
技术标签:
【中文标题】将背景音乐添加到网页【英文标题】：Adding background music to webpage 【发布时间】：2016-04-21 13:40:42 【问题描述】：所以，我遇到了一些问题。简单地说，我想在我的网页上有一个播放按钮，它可以同时播放两个文件。这些文件是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 方面，我和 font-stretch 元素一样有用。
【问题讨论】：
***.com/questions/18826147/… 您根本不应该在网页上播放背景音乐。大多数用户对此感到恼火。为什么有人要启用它？这是否为您的服务增加了任何价值？ @JonasKöritz 如果它自动运行是的，但是如果我对背景音乐感到恼火，我可以......你知道......不要按播放按钮？ 我在问音乐是否为服务增加了任何价值。 Jonas，基于网页基本上只是为了播放背景音乐而建立的，我确实认为它确实增加了价值。我明白你在暗示什么，但我不是在我的博客上添加一首烦人的歌曲的白痴：P 【参考方案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 文件添加正确的路径。
【讨论】：
刚把它粘贴进去，它就起作用了......感觉就像魔法一样！ :P 开个玩笑，非常感谢，向你致敬！ @HelpMe 这是more informations 关于<audio></audio>。你也可以考虑添加一个stopbutton。【参考方案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
【讨论】：
以上是关于将背景音乐添加到网页的主要内容，如果未能解决你的问题，请参考以下文章