许多人创建过音频播放器。通常,您只需选择一个可用的素材,通常是flash player。然而,您可能已经注意到,这些移动设备上的flash播放器不能正常工作(iPhone和Android)。今天我要告诉你关于如何创建自己的音频播放器(使用HTML5技术)。这个球员由下一个元素:标题、作者、封面,基本控制(播放/暂停、回放/前进),两个滑块(jQuery UI滑块):音量滑块和一首歌追踪,甚至更多:我们也会有一个播放列表可用歌曲的列表。步骤1。HTML像往常一样,我们必须包括几个文件头部分:HTML

• 01.mp3
• 02.mp3
• 03.mp3
• 04.mp3
• 05.mp3
• 06.mp3
• 07.mp3

看起来很容易,不是吗?正如您可以看到的,这里包括所有必要的元素。步骤2。CSS.example { margin: 50px auto 0; width: 400px;}.player { background: transparent url("../images/spr.png") no-repeat scroll center top; height: 162px; position: relative; width: 326px; z-index: 2;}.title, .artist { font-family: verdana; left: 167px; position: absolute; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}.title { color: #FFFFFF; font-size: 14px; font-weight: bold; top: 23px;}.artist { color: #EEEEEE; font-size: 12px; top: 40px;}.pl { background: transparent url("../images/spr.png") no-repeat scroll -274px -175px; cursor: pointer; height: 34px; left: 270px; position: absolute; top: 20px; width: 32px;}.pl:hover { top: 21px;}.cover { background: transparent url(../data/cover1.jpg) no-repeat scroll center top; border-radius: 5px 5px 5px 5px; height: 94px; left: 20px; position: absolute; top: 20px; width: 94px;}.controls { cursor: pointer; height: 23px; left: 167px; position: absolute; top: 65px; width: 138px;}.controls .play, .controls .pause, .controls .rew, .controls .fwd { background: transparent url("../images/spr.png") no-repeat scroll 0 0; float: left; height: 100%; width: 33%;}.controls .play { background-position: -8px -171px;}.controls .pause { background-position: -8px -198px; display: none;}.controls .rew { background-position: -54px -171px;}.controls .fwd { background-position: -100px -171px;}.controls .play:hover { background-position: -8px -170px;}.controls .pause:hover { background-position: -8px -197px;}.controls .rew:hover { background-position: -54px -170px;}.controls .fwd:hover { background-position: -100px -170px;}.hidden { display: none;}.controls .visible { display: block;}.volume { height: 11px; left: 186px; position: absolute; top: 96px; width: 112px;}.tracker { height: 15px; left: 20px; position: absolute; top: 126px; width: 285px;}.ui-slider-range { background: transparent url("../images/spr.png") no-repeat scroll 5px -222px; height: 100%; position: absolute; top: 0;}.ui-slider-handle { cursor: pointer; height: 10px; margin-left: -5px; position: absolute; top: 2px; width: 10px; z-index: 2;}.volume .ui-slider-handle { background: url("../images/spr.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0); height: 13px; width: 13px;}.playlist { background-color: #333333; border-radius: 5px 5px 5px 5px; list-style-type: none; margin: -10px 0 0 2px; padding-bottom: 10px; padding-top: 15px; position: relative; width: 326px; z-index: 1;}.playlist li { color: #EEEEEE; cursor: pointer; margin: 0 0 5px 15px;}.playlist li.active { font-weight: bold;}步骤3。JavaScript// inner variablesvar song;var tracker = $('.tracker');var volume = $('.volume');// initialization - first element in playlistinitAudio($('.playlist li:first-child'));// set volumesong.volume = 0.8;// initialize the volume slidervolume.slider({ range: 'min', min: 1, max: 100, value: 80, start: function(event,ui) {}, slide: function(event, ui) { song.volume = ui.value / 100; }, stop: function(event,ui) {},});// empty tracker slidertracker.slider({ range: 'min', min: 0, max: 10, start: function(event,ui) {}, slide: function(event, ui) { song.currentTime = ui.value; }, stop: function(event,ui) {}});然后,我准备几个通用函数来处理音频:function initAudio(elem) { var url = elem.attr('audiourl'); var title = elem.text(); var cover = elem.attr('cover'); var artist = elem.attr('artist'); $('.player .title').text(title); $('.player .artist').text(artist); $('.player .cover').css('background-image','url(data/' + cover+')');; song = new Audio('data/' + url); // timeupdate event listener song.addEventListener('timeupdate',function (){ var curtime = parseInt(song.currentTime, 10); tracker.slider('value', curtime); }); $('.playlist li').removeClass('active'); elem.addClass('active');}function playAudio() { song.play(); tracker.slider("option", "max", song.duration); $('.play').addClass('hidden'); $('.pause').addClass('visible');}function stopAudio() { song.pause(); $('.play').removeClass('hidden'); $('.pause').removeClass('visible');}然后我开始给我们的控制按钮添加事件处理程序。播放/暂停按钮:// play click$('.play').click(function (e) { e.preventDefault(); playAudio();});// pause click$('.pause').click(function (e) { e.preventDefault(); stopAudio();});为了转向另一首歌曲在播放列表,我们不得不停止玩当前歌曲,选择一个播放列表中的下一个对象(或之前),并重新初始化我们的音频元素。向前/回放按钮:// forward click$('.fwd').click(function (e) { e.preventDefault(); stopAudio(); var next = $('.playlist li.active').next(); if (next.length == 0) { next = $('.playlist li:first-child'); } initAudio(next);});// rewind click$('.rew').click(function (e) { e.preventDefault(); stopAudio(); var prev = $('.playlist li.active').prev(); if (prev.length == 0) { prev = $('.playlist li:last-child'); } initAudio(prev);});最后,一些函数来处理播放列表:// show playlist$('.pl').click(function (e) { e.preventDefault(); $('.playlist').fadeIn(300);});// playlist elements - click$('.playlist li').click(function () { stopAudio(); initAudio($(this));});