以下是 html5触发式音频播放特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html5触发式音频播放</title>
<link rel='stylesheet' href='css/style.css'>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="page-wrap">
<header><div class="inside">
<h1>Play Audio on :hover</h1>
<p>We're going to use HTML5 here, no Flash. We'll need an audio
element with both MP3 (WebKit, IE) and OGG (Firefox, Opera). </p>
<pre><code><audio controls preload="auto">
<source src="audio/beep.mp3" controls></source>
<source src="audio/beep.ogg" controls></source>
Your browser isn't invited for super fun audio time.
</audio></code></pre>
<p>We're using jQuery in this demo to make selecting things and events
easier, but the .play() function is native. You probably wouldn't show
the audio element, that's for demo purposes only, <strong>just remove
the control attribute to not show anything.</strong></p>
</div></header>
<section id="one"><div class="inside">
<h2>One <audio> for all menu items</h2>
<p>.play() won't force the audio clip to start over unless it's finished
first, not very smooth.</p>
<ul id="nav-one" class="nav">
<li>
<a href="#">Home</a>
<audio id="beep-one" controls="controls" preload="auto">
<source src="audio/beep.mp3"></source>
<source src="audio/beep.ogg"></source>
Your browser isn't invited for super fun time.
</audio>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<script>var beepOne = $("#beep-one")[0];
$("#nav-one a")
.mouseenter(function() {
beepOne.play();
});</script>
</div></section>
<section id="three"><div class="inside">
<h2>One <audio> for all menu items, with pause</h2>
<p>.pause() ing first should stop it and then play new sound but it
actually makes it worse somehow. Sounds get chopped off but not
restarted.</p>
<ul id="nav-three" class="nav">
<li>
<a href="#">Home</a>
<audio id="beep-three" controls preload="auto">
<source src="audio/beep.mp3" controls></source>
<source src="audio/beep.ogg" controls></source>
Your browser isn't invited for super fun time.
</audio>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<script>var beepThree = $("#beep-three")[0];
$("#nav-three a")
.mouseenter(function() {
beepThree.pause();
beepThree.play();
});</script>
</div></section>
<section id="two"><div class="inside">
<h2>Cloned <audio>, one for each menu item</h2>
<p>Smoothest but not perfect.</p>
<ul id="nav-two" class="nav">
<li>
<a href="#">Home</a>
<audio id="beep-two" controls preload="auto">
<source src="audio/beep.mp3" controls></source>
<source src="audio/beep.ogg" controls></source>
Your browser isn't invited for super fun time.
</audio>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<script>$("#nav-two a")
.each(function(i) {
if (i != 0) {
$("#beep-two")
.clone()
.attr("id", "beep-two" + i)
.appendTo($(this).parent());
}
$(this).data("beeper", i);
})
.mouseenter(function() {
$("#beep-two" + $(this).data("beeper"))[0].play();
});
$("#beep-two").attr("id", "beep-two0");</script>
</div></section>
</div>
</body>
</html>
CSS代码(style.css):
/* CSS-Tricks Example by Chris Coyier http://css-tricks.com*/
*{margin:0;padding:0;}
body{font:14px/1.4 Georgia,serif;}
article,aside,figure,footer,header,hgroup,menu,nav,section{display:block;}
header{background:black;color:white;padding:80px 0 10px 0;}
h1,h2{font-weight:normal;}
h1{font-size:50px;margin:0 0 10px 0;}
h2{font-size:38px;margin:0 0 10px 0;}
p,pre{margin:0 0 15px 0;}
.inside{width:960px;margin:0 auto;}
section{padding:20px 0;overflow:hidden;}
#one{background:#6f4b7c;}
#two{background:#3c7ab5;}
#three{background:#ffeca9;}
.nav{width:120px;float:left;list-style:none;}
.nav li{position:relative;}
.nav a{display:block;padding:20px;text-decoration:none;color:white;background-image:-moz-linear-gradient(bottom,#444444,#999999);/* FF3.6 */
background-image:-o-linear-gradient(bottom,#444444,#999999);/* Opera 11.10+ */
background-image:-webkit-gradient(linear,left top,left bottom,from(#444444),to(#999999));/* Saf4+,Chrome */
background-image:-webkit-linear-gradient(bottom,#444444,#999999);/* Chrome 10+,Saf5.1+ */
}
.nav a:hover{background:#222;}
.nav audio{position:absolute;left:110%;top:10px;display:block;height:30px;width:200px;}
#page-wrap script{display:block;white-space:pre;background:#333;color:white;padding:10px;font:11px Monaco,MonoSpace;width:460px;float:right;overflow:auto;}
分享到QQ
分享到微博
微信扫一扫
