HTML5音乐播放器.docx

HTML5音乐播放器 一般情况下，要在html网页中播放音乐或者播放视频，可使用flash完成。但是，苹果系列因为商业缘故，并不支持flash插件，这就使得很多在其他设备能正常播放的视频、音乐，在苹果中不能播放。但值得庆幸的是，苹果支持html5，同时html5中有许多针对音视频的支持。一、视频的跨平台解决方案1、使用元素 如优酷提供的2、 使用html5标签 如、 其中，可以支持在播放失败时加载预置的js代码二、音频的跨平台解决方案1、使用html5播放器 网上有很多html5音乐播放器，但都是基于html5标签实现的。这里我们使用audio.js来实现音乐播放，播放界面如下：使用步骤：1.引入js和css audio.js body color: #666; font-family: sans-serif; line-height: 1.4; h1 color: #444; font-size: 1.2em; padding: 14px 2px 12px; margin: 0px; h1 em font-style: normal; color: #999; a color: #888; text-decoration: none; #wrapper width: 400px; margin: 40px auto; ol padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; ol li position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; ol li a display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; li.playing color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); li.playing a color: #000; li.playing:before content: ; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; fo nt-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); #shortcuts position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background : rgba(240, 240, 240, 0.7); #shortcuts div width: 460px; margin: 0px auto; #shortcuts h1 margin: 0px 0px 6px; #shortcuts p margin: 0px 0px 18px; #shortcuts em font-style: normal; background: #d3d3d3; padding: 3px 9px; position: relative; left: -3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); media screen and (max-device-width: 480px) #wrapper position: relative; left: -3%; #shortcuts display: none; $(function() / Setup the player to autoplay the next track var a = audiojs.createAll( trackEnded: function() var next = $(ol li.playing).next(); if (!next.length) next = $(ol li).first(); next.addClass(playing).siblings().removeClass(playing); audio.load($(a, next).attr(data-src); audio.play(); ); / Load in the first track var audio = a0; first = $(ol a).attr(data-src); $(ol li).first().addClass(playing); audio.load(first); / Load in a track on click $(ol li).click(function(e) e.preventDefault(); $(this).addClass(playing).siblings().removeClass(playing); audio.load($(a, this).attr(data-src); audio.play(); ); / Keyboard shortcuts $(document).keydown(function(e) var unicode = e.charCode ? e.charCode : e.keyCode; / right arrow if (unicode = 39) var next = $(li.playing).next(); if (!next.length) next = $(ol li).first(); next.click(); / back arrow else if (unicode = 37) var prev = $(li.playing).prev(); if (!prev.length) prev = $(ol li).last(); prev.click(); / spacebar else if (unicode = 32) audio.playPause(); ) ); 音乐试听测试 (music) 轻音乐MAMAPlanet风来了-轻音乐风来了kiroro - 长久 键盘控制说明: 下一曲 上一曲 Space 播放/暂停 其中的中的data-src是我们