我创建了一个网站（尚未播出），我通过一些免费托管测试了它。该网站包含地图标记和其中的大图。我是这样做的，如果有人点击图片的一部分，将根据他点击的位置听到特定的音频。
我的问题是有很多音频标签（大约300个），并且因为有很多带宽占用文件，所以大约需要10分钟，直到网站完全加载，这意味着大多数音频都不能工作几分钟。
我想知道是否有办法，也许是使用javascript或PHP的响应方式，只有当用户点击地图时才允许我制作这些音频标签。这样它就不会使用那么多带宽。此外，如果有人能想到一个更好的方式，它将非常感激。
我正在为点击事件添加javascript，以便您可以看到它的全部内容 -
$('#Swensens_maze').click(function(){
$('audio').each(function(){
this.pause(); // Stop playing
// Reset time
});
$('#Swensens_maze_audio').get(0).play();
return false;
});
这是许多人的一个例子。 “#swensens_maze”是区域标签，“#Swensens_maze_audio”是它的音频标签。
编辑
现在音频会自动发出声音
编辑2
我刚才记得一个空的src是一个不好的做法，我会找到一个解决方案，最好的方法是将信息存储在其他标签中，然后用js创建一个音频标签
编辑3
JS FIDDLE VERSION 2
更好的版本，不会留下一个空的src属性，所有的音频信息都存储在隐藏的input内，一旦你单击该区域，audio标签是通过JS在点击的div内提供的。
<html>
<head>
<script src="jq.js"></script>
<style>
.map {width:100%;height:75px;background:#bbb}
.c1 {background:#f2f2f2}
.c2 {background:#000}
.c3 {background:#cc4444}
</style>
</head>
<body>
<div class='map c1'>
<input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
</div>
<div class='map c2'>
<input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
</div>
<div class='map c3'>
<input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
</div>
<script>
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
//Check if audio is already present, if true, then exit
if($(this).find('audio').length > 0)
return;
var childInput = $(this).find('input:hidden'), //Find information
audioTag = document.createElement("AUDIO"),// Create AUDIO element
audioSource = document.createElement("SOURCE"), //Create SOURCE element
audioType = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
audioSrc = childInput.attr('data-original'); //retrieve audio src
//Set type and src of the source
audioSource.type= audioType;
audioSource.src= audioSrc;
//Enable controls and append SOURCE to AUDIO
audioTag.controls = true;
audioTag.appendChild(audioSource);
this.appendChild(audioTag);// Append the created audio tag to the clicked div
audioTag.load();//Load the src
audioTag.play();//Play the audio
return false;
});
</script>
</body>
</html>
老答复 空src $（'div.map'）不好。click（function（）{$（'audio'）。each（function（）{this.pause（）;}）; var audioTag = $（this）.find （'audio'），sourceTag = audioTag.children（'source'）;
if (sourceTag.attr('src')=='') {
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
}
audioTag.get(0).play();
return false;
});
整页FIDDLE DEMO（播放器没有出现，因为没有任何音频文件）：
<html>
<head>
<script src="jq.js"></script>
<style>
.map {
width:100%;
height:75px;
background:#bbb
}
.c1 {
background:#f2f2f2
}
.c2 {
background:#000
}
.c3 {
background:#cc4444
}
</style>
</head>
<body>
<div class='map c1'>
<audio controls>
<source data-original='1.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c2'>
<audio controls>
<source data-original='2.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c3'>
<audio controls>
<source data-original='3.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<script>
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='') {
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
}
audioTag.play();
return false;
});
</script>
</body>
</html>
是的，不要将src属性留空，而是给src一个有效的空白和短文件.mp3。然后当用户点击或用好文件替换src时，如下所示：
document.getElementById（“audio8”）。src =“song.mp3”;
此外，根据如何制作您的页面，如果音频块一块一块地出现，请查看lazysize.js以便在流氓时顺利加载您的内容。易于使用且功能强大。 https://github.com/aFarkas/lazysizes
您的问题发生是因为浏览器尝试为每个音频标签预加载音频。所以答案是将audio标签中的属性preload设置为none
<audio preload="none">
<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>