mgtv - 素材

当前位置:Gxlcms > 播放器 > html5触发式音频播放

html5触发式音频播放

时间:2021-07-01 10:21:17 帮助过:0人阅读

html5触发式音频播放 html5触发式音频播放是一款基于jquery+html5实现的音频网站响应式播放效果。本作品由【站长素材】收集整理,转载请注明出处!

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>html5触发式音频播放 - mgtv素材</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&#39;re going to use HTML5 here, no Flash. We&#39;ll need an audio 
			element with both MP3 (WebKit, IE) and OGG (Firefox, Opera). </p>
			
			<pre><code>&lt;audio controls preload=&quot;auto&quot;&gt;
	&lt;source src=&quot;audio/beep.mp3&quot; controls&gt;&lt;/source&gt;
	&lt;source src=&quot;audio/beep.ogg&quot; controls&gt;&lt;/source&gt;
	Your browser isn&#39;t invited for super fun audio time.
&lt;/audio&gt;</code></pre>

		<p>We&#39;re using jQuery in this demo to make selecting things and events 
		easier, but the .play() function is native. You probably wouldn&#39;t show 
		the audio element, that&#39;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 &lt;audio&gt; for all menu items</h2>

		<p>.play() won&#39;t force the audio clip to start over unless it&#39;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&#39;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 &lt;audio&gt; 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&#39;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 &lt;audio&gt;, 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&#39;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="https://www.mgtv.xyz" target="_blank">mgtv素材</a></p>
</div>				

</body>