通过onclick-event按钮添加声音

时间:2018-08-31 02:28:59

标签: javascript html5

尝试向这些按钮添加声音

<a href="stout_page.html"><audio id="sound1" src="Button_Push.mp3" preload="auto"></audio><button onClick="document.getElementId('sound1').play();" target="_top">Stouts</button></a>
<a href="sours_page.html"><button target="_top">Sours</button></a>
<a href="ipa_page.html"><button target="_top">India Pale Ales</button>.      </a>
<a href="brett and more.html"><button target="_top">Brett and more</button></a>
<a href="test_page.html"><button target="_top">test</button></a>

1 个答案:

答案 0 :(得分:0)

您可以在按钮上添加声音,但是单击href标签时将使用a刷新页面。在button中单击将调用播放函数来播放声音。

<script>
  function play(src) {
    var player = document.getElementById('audio');
    player.pause();
    player.currentTime = 0;
    player.src = src;
    player.play();
  }
</script>

<input type="button" value="PLAY" onclick="play('http://dev.interactive-creation-works.net/1/1.ogg')">
<audio id="audio" src="http://dev.interactive-creation-works.net/1/1.ogg" autostart="false"></audio>

<a href="stout_page.html"><audio id="sound1" src="Button_Push.mp3" preload="auto"></audio>
<button onClick="play('Button_Push.mp3');" target="_top">Stouts</button></a>
<a href="sours_page.html"><button target="_top" onClick="play('Button_Push-1.mp3');" >Sours</button></a>
<a href="ipa_page.html"><button target="_top" onClick="play('Button_Push-2.mp3');">India Pale Ales</button></a>
<a href="brett and more.html"><button target="_top" onClick="play('Button_Push-3.mp3');">Brett and more</button></a>
<a href="test_page.html"><button target="_top" onClick="play('Button_Push-4.mp3');">test</button></a>