Функция, чтобы остановить все аудио из HTML, используя MAP с идентификатором области - PullRequest
Новая
       15

Функция, чтобы остановить все аудио из HTML, используя MAP с идентификатором области

0 голосов
/ 07 марта 2019

У меня есть простой HTML с Image MAP, который указывает на 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 ()», которая не работает, потому что, когда я нажимаю любое другое аудио, оно продолжает работать на фоне с новым аудио.

Существует ли какая-либо функция, которая может останавливать все остальные аудиозаписи, когда нажимается следующая, или какая-либо функция, позволяющая остановить весь звук вручную, а затем воспроизводить другой звук?

Большое спасибо.

С уважением,

Mario.

1 Ответ

0 голосов
/ 07 марта 2019

похоже, потому что функция 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 должен работать.

...