点击时加载一个声音

在移动端，点击图片切换时，给点击加一个背景声效，总结一下

html5的音频标签

<audio id="shake_action" src="img/2.mp3" preload="auto" autoplay="true"></audio>

这两个属性都去掉，不然桌面浏览器每次刷新都会自动播放有声音, 某些安卓浏览器也会有声音

preload="auto"

autoplay="true"

js点击播放

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">                           
<title>点击加载一个声效</title>
<style>
#button{height:200px;width:200px;background:yellow;margin:100px auto;}
</style>
</head>
<body>

<audio id="shake_action" src="img/2.mp3"></audio>

<div id="button"></div>

<script type="text/javascript">

  var oAuto = document.getElementById('shake_action');
  var oBtn = document.getElementById('button');

  oBtn.onclick = function(){
    oAuto.play();     
  };

</script>
</body>
</html>

空连接

上面点击的是 div 元素 ,如果点击用 a 连接，那就要给a连接加一个空连接

href本身是一个内置的 onclick 事件，正常情况下，比如写 #号都发生一个跳转，地址栏会发生改变，我们写 javascript 是点击地址是不变的

<a href="javascript:console.log(1);">Glee</a>

如果要希望点击,不要发跳转，也不要发生刷新最好的办法是写成空的javasectip:;

<a href="javascript:;">空链接</a> <!-- 这样基本是可以, 但测试时发现有些浏览器，点击时发生跳转，不能起到空连接的作用 -->

<a href="javascript:void(0)">空链接</a> <!-- 这样写都兼容了，今后就用这个写法,加空连接了-->

转

https://www.cnblogs.com/shemingli/p/6817093.html?utm_source=itdadao&utm_medium=referral

https://segmentfault.com/q/1010000003800524?sort=created

点击时加载一个声音

Leave a Reply