mgtv - 素材

当前位置:Gxlcms > 播放器 > html5+css3酷炫音频播放器

html5+css3酷炫音频播放器

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

html5+css3酷炫音频播放器 html5+css3酷炫音频播放器是一款UI设计的html5+css3黑色酷炫播放器效果。
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>html5+css3酷炫音频播放器 - mgtv素材</title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="all" >
</head>
<body>

<div class="page">
    <br><br><br><br>
    <section class="demo">
        <div id="myAudio" style="margin:0 auto;">
			<audio>
				<source title="王若琳 - Wild World.mp3" src="http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3" />
				<source title="韦礼安 - 还是会.mp3" src="http://stream18.qqmusic.qq.com/31005070.mp3" />
				<source title="王若琳 - Lost in paradise.mp3" src="http://stream12.qqmusic.qq.com/30416842.mp3" />
				<source title="郁可唯 - 时间煮雨.mp3" src="http://stream16.qqmusic.qq.com/34825889.mp3" />
				<source title="王若琳 - 三个人的晚餐.mp3" src="http://stream17.qqmusic.qq.com/30966988.mp3" />
				<source title="王若琳 - I Love You.mp3" src="http://stream17.qqmusic.qq.com/30416851.mp3" />
				<source title="王若琳 - Lemon Tree(中文版).mp3" src="http://stream17.qqmusic.qq.com/30966990.mp3" />
				<source title="王若琳 - 亲密爱人.mp3" src="http://stream17.qqmusic.qq.com/30966572.mp3" />
			</audio>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript" src="AudioPlayer.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#myAudio").initAudio();
			});
		</script>
    </section>

</div>
<div style="text-align:center;clear:both">
<p>适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
<p>来源:<a href="http://www.w3cplus.com/" target="_blank">w3cplus</a></p>
</div>
</body>