使用具有区域ID的MAP从HTML停止所有音频的功能

问题描述 投票:0回答:1

我有一个带有图像MAP的简单HTML,它指向21个区域,每个人都引用了一个JS函数,它可以播放代码中引用的音频,如下所示:

function playSound(soundfile) {
    var audio = new Audio(soundfile);
    audio.play();
}

function StopAllAudio() {
var audio = document.getElementByTagName("area");
		for(var audioS : AudioSource in allAudioSources) {
			audioS.Stop();
		}
	}
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
      <title>Mapa de Sons de l'Escola</title>
   </head>
   <body>
      <p><strong>MAPA DE SONS DE L'ESCOLA</strong></p>
      <p>
         <img src="BP_mapa.jpg" alt="mapasons" width="1200" height="1034" usemap="#Map" border="0" onclick="myFunction()" />
         <map name="Map" id="Map">
            <area shape="poly" coords="571,194,612,176,623,198,580,218" href="JavaScript: playSound('sounds/1.mp3');" alt="1"/>
            <area shape="rect" coords="1007,162,1043,227" href="JavaScript: playSound('sounds/2.mp3');" alt="2" />
            <area shape="rect" coords="1047,162,1083,227" href="JavaScript: playSound('sounds/3.mp3');" alt="3"/>
            <area shape="rect" coords="1088,162,1123,227" href="JavaScript: playSound('sounds/4.mp3');" alt="4" />
            <area shape="circle" coords="604,276,35" href="JavaScript: playSound('sounds/5.mp3');" alt="5" />
            <area shape="circle" coords="850,295,57" href="JavaScript: playSound('sounds/6.mp3');" alt="6" />
            <area shape="circle" coords="608,382,38" alt="7" href="JavaScript: playSound('sounds/7.mp3');"/>
            <area shape="poly" coords="844,376,854,376,853,373,867,373,867,376,877,376,877,399,868,408,854,409,844,400,844,376" href="JavaScript: playSound('sounds/8.mp3');" alt="8"/>
            <area shape="rect" coords="618,452,679,545" href="JavaScript: playSound('sounds/9.mp3');" alt="9"/>
            <area shape="rect" coords="802,435,925,488" alt="10" href="JavaScript: playSound('sounds/10.mp3');" />
            <area shape="rect" coords="945,460,1052,504" href="JavaScript: playSound('sounds/11.mp3');" alt="11"/>
            <area shape="rect" coords="799,508,1052,548" alt="12" href="JavaScript: playSound('sounds/12.mp3');" />
            <area shape="circle" coords="586,572,35" href="JavaScript: playSound('sounds/13.mp3');" alt="13" />
            <area shape="rect" coords="399,609,464,753" href="JavaScript: playSound('sounds/14.mp3');" alt="14"/>
            <area shape="rect" coords="300,792,345,820" href="JavaScript: playSound('sounds/15.mp3');" alt="15"/>
            <area shape="rect" coords="347,792,392,820" href="JavaScript: playSound('sounds/16.mp3');" alt="16"/>
            <area shape="rect" coords="393,792,440,820" href="JavaScript: playSound('sounds/17.mp3');" alt="17"/>
            <area shape="rect" coords="127,813,185,866" href="JavaScript: playSound('sounds/18.mp3');" alt="18"/>
            <area shape="poly" coords="208,819,250,820,250,851,458,851,454,859,459,859,446,888,440,888,436,897,439,898,250,896,250,874,207,874,208,819" href="JavaScript: playSound('sounds/19.mp3');" alt="19"/>
            <area shape="rect" coords="127,869,185,922" href="JavaScript: playSound('sounds/20.mp3');" alt="20"/>
            <area shape="poly" coords="252,980,399,980,420,936,252,935" href="JavaScript: playSound('sounds/21.mp3');" alt="21" />
         </map>
      </p>
      <button id="botoParar" onclick="StopAllAudio()">Para Audios</button>
   </body>
</html>

此外,我在JS中有一个函数,当按下按钮时,它必须停止所有音频“StopAllAudio()”,它不起作用,因为当我按下任何其他音频时,它会继续在后台运行新音频。

是否有任何功能可以在按下下一个音频时停止所有其他音频或任何手动停止所有音频的功能然后你可以播放另一个声音?

非常感谢。

最好的祝福,

马里奥。

javascript html html5 html5-audio
1个回答
0
投票

看起来它是因为函数“playSound”只是创建Audio对象的新实例并开始播放。新创建的对象不存储在区域内

<area shape="poly" coords="571,194,612,176,623,198,580,218" href="JavaScript: playAreaSound('1');" alt="1">
<audio
  src="sounds/1.mp3">
  Your browser does not support the <code>audio</code> element.
</audio>
</area>
playAreaSound(areaId) {
   const audio = document.getElementBy...;//Anything you want using passed areaId
   audio.play();
}

和StopAllAudio应该工作。

© www.soinside.com 2019 - 2024. All rights reserved.