HTML拖放声音
Posted
技术标签:
【中文标题】HTML拖放声音【英文标题】：HTML drag n drop sound 【发布时间】：2014-01-11 22:06:19 【问题描述】：我目前正在尝试用不同的大陆做 html 拖放表。该人将有能力将正确的大陆拖到它应该在的 div 中。我已经完成了所有的 div 标签和拖放功能，但我还想添加的是声音。我有两个声音 right.mp3 和 wrong.mp3。我希望他们可以在人将正确的大陆放在正确的位置以及错误的大陆（正确的大陆作为正确的.mp3，而错误的大陆放置在错误的.mp3）时播放。我尝试了许多不同的方法来制作声音，但不幸的是我无法让它正常工作。如果有人知道该怎么做，如果您向我展示它在代码中的外观，我会非常满意。下面是我到目前为止所做的代码。谢谢。
P.S 抱歉，我的英语不是我的母语，因此给您带来的任何不便，我深表歉意。谢谢。
代码：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1
float:left; width:500px; height:250px;border:1px solid;
position: absolute;
background-image:url('Winkel_triple_projection_SW.jpg');
background-size:500px 255px;
background-repeat: no-repeat;
z-index: -10;
#div2
width:80px; height:108px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -1;
position: absolute;
margin-top: 100px;
margin-left: 120px;
#americainside
width:100px; height:150px;border:1px solid #aaaaaa;
#div3
width:95px; height:100px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -2;
position: absolute;
margin-left: 90px;
#northmurica
width:100px; height:130px;border:1px solid #aaaaaa;
#div4
width:95px; height:100px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -1;
position: absolute;
margin-top: 80px;
margin-left: 220px;
#Africa
width:100px; height:129px;border:1px solid #aaaaaa;
#div5
width:200px; height:80px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -1;
position: absolute;
margin-top: 0px;
margin-left: 232px;
#Europe
width:210px; height:120px;border:1px solid #aaaaaa;
#div6
width:71px; height:58px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -1;
position: absolute;
margin-top: 140px;
margin-left: 390px;
#Australia
width:100px; height:100px;border:1px solid #aaaaaa;
#div7
width:300px; height:40px; margin:10px;border:1px solid #aaaaaa;
background: white;
z-index: -1;
position: absolute;
margin-top: 210px;
margin-left: 90px;
#Southpole
width:355px; height:70px;border:1px solid #aaaaaa;
#right
width:360px;
border:5px solid #aaaaaa;
float:right;
margin-right: 30%;
</style>
<script>
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData("Text",ev.target.id);
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="right">
<div id="americainside" ondrop="drop(event)" ondragover="allowDrop(event)">
South America
<img src="South america.png" draggable="true" ondragstart="drag(event)"
id="drag2" ></div>
<div id="northmurica" ondrop="drop(event)" ondragover="allowDrop(event)">
North America
<img src="North america.png" draggable="true" ondragstart="drag(event)"
id="drag1" ></div>
<div id="Africa" ondrop="drop(event)" ondragover="allowDrop(event)">
Africa
<img src="Africa.png" draggable="true" ondragstart="drag(event)"
id="drag3" ></div>
<div id="Europe" ondrop="drop(event)" ondragover="allowDrop(event)">
Europe
<img src="Europe.png" draggable="true" ondragstart="drag(event)"
id="drag4" ></div>
<div id="Australia" ondrop="drop(event)" ondragover="allowDrop(event)">
Australia
<img src="Australia.png" draggable="true" ondragstart="drag(event)"
id="drag5" ></div>
<div id="Southpole" ondrop="drop(event)" ondragover="allowDrop(event)">
Southpole
<img src="south pole.png" draggable="true" ondragstart="drag(event)"
id="drag6" ></div>
</div>
</body>
</html>
我确实知道我可以使用其他东西，但我想用 HTML 来做。如果您建议其他可能的选择，我仍然不介意。我显然不要求任何人完成整个工作，但如果你至少能给我展示一个例子，那就太好了。谢谢。
编辑：我也在寻找将 div 标签移动到某处后清除它们的按钮。
编辑 2：我已按照 Alexander T 的建议添加了播放功能，但我确信这里做错了什么。 代码：
<script>
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData("Text",ev.target.id);
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.playSound;
var path = 'cat.mp3'
function playSound(path)
var sound = new Audio(path);
sound.play();
</script>
这行不通。我想我没有正确调用该函数。如果有人能告诉我如何正确地做到这一点。谢谢。
编辑：这是它现在的样子，但仍然无法正常工作。不知道我在这里做错了什么。
<script>
function allowDrop(ev)
ev.preventDefault();
function drag(ev)
ev.dataTransfer.setData("Text",ev.target.id);
function drop(ev)
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
playSound("catSound");
function playSound(path)
var sound = new Audio(path);
sound.play();
</script>
【问题讨论】：
【参考方案1】：尝试使用 HTML5 音频 API。
function playSound(path)
var sound = new Audio(path);
sound.play();
其中 'path' 是一个带有声音路径的字符串，例如'/audio/rightSound.mp3'
在 JS 中有一组方法和属性用于 Audio 对象。在这里找到它http://www.w3schools.com/tags/ref_av_dom.asp
这里有一篇关于在 HTML5 中使用音频的非常好的文章 http://html5doctor.com/html5-audio-the-state-of-play/
【讨论】：
我明白了。但是当项目被放入窗口时我如何让它播放？ 当你说路径应该是带有路径的字符串时，你的意思是这样的吗？ var path = '/audio/rightSound.mp3' 然后是路径function drop(ev) ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.playSound; 应该类似于：function drop(ev) ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); playSound("/audio/rightSound.mp3");
补充说。似乎没有工作。编辑代码，如果你可以看一下它并告诉它有什么问题，那将非常有帮助。谢谢。
不是playSound("catSound");，而是playSound("catSound.mp3");，如果您将catSound.mp3 文件放在与index.html 相同的目录中。以上是关于HTML拖放声音的主要内容，如果未能解决你的问题，请参考以下文章
HTML：如何在不缓冲所有声音数据的情况下从 URL 中间文件开始声音播放
使用 Javascript/Jquery 停止 html 声音