HTML audio po kliknięciu w obrazek

pytanie zadane 24 maja 2017 w HTML i CSS przez Norbert123 Początkujący (290 p.)

Witam, potrzebuję pomocy z uruchomieniem audio po kliknięciu w obrazek na mojej stronie. Otóż udało mi się wyszukać w internecie rozwiązanie, które niby działa, ale brzydko wygląda, bo dookoła obrazka jest szara obwódka (przycisk).

<body>
	<div id="container">	
		<audio id="sound1" src="song.mp3" preload="auto"></audio>
		<button onclick="document.getElementById('sound1').play();">
        <img name="track1" src="obrazek.png" border="0"
        id="track1" alt="" class="play" /></button>
    </div>

Chciałbym usunąć tą obwódkę, a jeśli bylibyście tak życzliwi :) to prosiłbym o pomoc w zrobieniu efektu, gdzie muzyka nie włącza się po kliknięciu gdziekolwiek na obrazek, tylko w konkretnym miejscu (w moim przypadku przycisk "play" na obrazku radia)

1 odpowiedź

odpowiedź 25 maja 2017 przez Chess Szeryf (76,710 p.)
wybrane 25 maja 2017 przez Norbert123

Najlepsza

<audio id="sound1" src="miasto.mp4"></audio>
        
<img src="http://www.gry-online.pl/im/play-14fp-small.png" usemap="#mapa"/> 
<div style="width:20px;height:20px;background-color:black;cursor:pointer"  id="id"></div>
 
<map name="mapa" id="mapa">
<area shape="circle" coords="25,25,25" href="#" alt="Kurs HTML" title="Kurs HTML" />
</map>


<script>
function player() {
      
        document.getElementById('sound1').play();
   }
function stopped(){ 
		document.getElementById('sound1').pause();
}
     
     var el = document.getElementById("mapa"); 
     el.addEventListener("click", player, false); 
	 
	 var el2 = document.getElementById("id");
	 el2.addEventListener("click",stopped,false);
   
</script>

http://www.kurshtml.edu.pl/przyklady/html/html5.html#controls

W tagu audio możesz użyć atrybutu controls, który utworzy ci odtwarzacz audio, który jest wbudowany w przeglądarkę.

Jeśli masz nieregularny kszałt przycisku "play" to użyj w polu <area shape="..."> shape="poly".

Natomiast jeśli chcesz, aby po kliknięciu w przycisk "player" zaczęła odtwarzać ci się muzyka, a następnie po 2. kliknięciu zatrzymała ci się muzyka, to użyj if'a.

http://www.kurshtml.edu.pl/html/area,html.html

Oczywiście możesz tak kombinować, lecz canvas byłby raczej lepszym wyborem.

https://msdn.microsoft.com/en-us/library/gg589528(v=vs.85).aspx