html5触发式音频播放html5触发式音频播放网页特效.zip

共5个文件

ogg：1个

html：1个

css：1个

版权申诉

javascript

jQuery

html5

33 浏览量 2022-11-18 22:13:31 上传评论收藏 50KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5触发式音频播放 html5触发式音频播放网页特效.zip （5个子文件）

html5触发式音频播放 html5触发式音频播放网页特效

jiaoben1056

css

style.css 1KB

index.html 4KB

jquery.min.js 84KB

audio

beep.ogg 10KB

beep.mp3 8KB

<!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> <div style="text-align:center;clear:both"> <p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉