很强大的jquery+html音乐播放器

 

很强大的jquery+html音乐播放器,点击可以查看大图
需      要: 0.0 金币
折      扣: 100 (% 折)
 
相关搜索: 很强大的jquery html 音乐 播放器 
下载次数: 102
支持一下(1)
100.00%
踩一下(0)
0.00%
  • 下载等级:
  • 编  号: 20120601170339
  • 浏览器兼容IE7.0,IE8.0,IE9.0,Firefox9.0及以前,Firefox10.0,Chrome17.0及以前,Chrome18.0
  • 更新日期: 2012-06-01
  • 大  小: 2.28MB
  • 浏览次量: 4813
  • 开发者链接: 官网  演示
  • 相  关: 违规举报
  • 收  藏:( 0 人收藏) 加入收藏
  • 此内容校验人员: sinacomcn
分享到:   
sohu88  
 中士 上传于/2012-06-01 17:07:34
一星会员   
   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>很强大的jquery+html5音乐播放器 by 25175</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/skin.css" type="text/css" media="screen"/>
<link href="css/jplayer.codrops.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="js/jquery.jcarousel.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
            Cufon.replace('h2,h3,a',{
                textShadow: '1px 1px 1px #000000'
            });
        </script>
<script type="text/javascript">
            $(function() {
                /**
                * build the carousel for the Albums
                */
                $('#mp_albums').jcarousel({
                    scroll : 3
                }).children('li')
                  .bind('click',function(){
                    //when clicking on an album, display its info, and hide the current one
                    var $this = $(this);
                    $('#mp_content_wrapper').find('.mp_content:visible')
                                            .hide();
                                            
                                                $('#mp_content_wrapper')
                                                .find('.mp_content:nth-child('+ parseInt($this.index()+1) +')')
                                                .fadeIn(1000);
                                            
            });

                /****  The Player  ****/
                // Local copy of jQuery selectors, for performance.
                var jpPlayTime = $("#jplayer_play_time");
                var jpTotalTime = $("#jplayer_total_time");
                var $list         = $("#jplayer_playlist ul");

                /**
                * Innitialize the Player
                * (see jPlayer documentation for other options)
                */
                $("#jquery_jplayer").jPlayer({
                    oggSupport    : true,
                    preload        :"auto"
                })
                .jPlayer("onProgressChange",
                    function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
                    jpPlayTime.text($.jPlayer.convertTime(playedTime));
                    jpTotalTime.text($.jPlayer.convertTime(totalTime));
                })
                .jPlayer("onSoundComplete", function() {
                    playListNext();
                });

                /**
                * click previous button, plays previous song
                */
                $("#jplayer_previous").bind('click', function(){
                    playListPrev();
                    $(this).blur();
                    return false;
                });

                /**
                * click next button, plays next song
                */
                $("#jplayer_next").bind('click', function() {
                    playListNext();
                    $(this).blur();
                    return false;
                });

                /**
                * plays song in position i of the list of songs (playlist)
                */
                function playSong(i){
                    var $next_song         = $list.find('li:nth-child('+ i +')');
                    var mp3                = $next_song.find('.mp_mp3').html();
                    var ogg                = $next_song.find('.mp_ogg').html();
                    $list.find('.jplayer_playlist_current').removeClass("jplayer_playlist_current");
                    $next_song.find('a').addClass("jplayer_playlist_current");
                    $("#jquery_jplayer").jPlayer("setFile", mp3, ogg).jPlayer("play");
                }

                /**
                * plays the next song in the playlist
                */
                function playListNext() {
                    var $list_nmb_elems = $list.children().length;
                    var $curr             = $list.find('.jplayer_playlist_current');
                    var idx                = $curr.parent().index();
                    var index             = (idx < $list_nmb_elems-1) ? idx+1 : 0;
                    playSong(index+1);
                }

                /**
                * plays the previous song in the playlist
                */
                function playListPrev() {
                    var $list_nmb_elems = $list.children().length;
                    var $curr             = $list.find('.jplayer_playlist_current');
                    var idx                = $curr.parent().index();
                    var index             = (idx-1 >= 0) ? idx-1 : $list_nmb_elems-1;
                    playSong(index+1);
                }
                
                /**
                * User clicks the play icon on one of the songs listed for an Album.
                * Adds it to the Playlist, and plays it
                */
                function addFirst(song_idx,name,mp3,ogg) {
                    $list.empty();
                    /**
                    * each song element in the playlist has:
                    * - span for the close / remove action
                    * - the mp3 path
                    * - the ogg path
                    */
                    var song_html = "<a href='#' class='jplayer_playlist_current' tabindex='1'>" + name + "</a>";
                    song_html      += "<span></span>";
                    song_html      += "<div class='mp_mp3' style='display:none;'>"+mp3+"</div>";
                    song_html      += "<div class='mp_ogg' style='display:none;'>"+ogg+"</div>";
                    var $listItem = $("<li/>",{
                        id            : song_idx,    
                        className    : 'jplayer_playlist_current',
                        html         : song_html
                    });
                    $list.append($listItem);
                    //event to play the song when User clicks on it
                    $listItem.find('a').bind('click',clickSong);
                    //event to remove the song from the playlist when User clicks the remove button
                    $listItem.find('span').bind('click',removeSong);
                    //start playing it
                    $("#jquery_jplayer").jPlayer("setFile", mp3, ogg).jPlayer("play");
                    jpTotalTime.show();
                    jpPlayTime.show();
                }
                
                /**
                * adds a song to the playlist, if not there already.
                * if it is the only one, start playing it
                */
                function addToPlayList(song_idx,name,mp3,ogg) {
                    var $list_nmb_elems = $list.children().length;
                    //if already in the list return
                    if($list.find('#'+song_idx).length)
                        return;
                    //class for the current song being played
                    var c = '';
                    if($list_nmb_elems == 0)
                        c = 'jplayer_playlist_current';
                    var song_html = "<a href='#' class="+c+" tabindex='1'>" + name + "</a>";
                    song_html      += "<span></span>";
                    song_html      += "<div class='mp_mp3' style='display:none;'>"+mp3+"</div>";
                    song_html      += "<div class='mp_ogg' style='display:none;'>"+ogg+"</div>";
                    var $listItem = $("<li/>",{
                        id            : song_idx,    
                        html         : song_html
                    });
                    $list.append($listItem);
                    //if its the only song play it
                    if($list_nmb_elems == 0){
                        $("#jquery_jplayer").jPlayer("setFile", mp3, ogg).jPlayer("play");
                        jpTotalTime.show();
                        jpPlayTime.show();
                    }
                    $listItem.find('a').bind('click',clickSong);
                    $listItem.find('span').bind('click',removeSong);
                }
                
                /**
                * removes a song from the playlist.
                * if the song was the current one, and there are more songs
                * in the playlist, then plays the next one.
                * if there are no more, stops the player, and removes the status bar
                * otherwise keeps playing whatever song was being played
                */
                function removeSong() {
                    var $this     = $(this);
                    var current = $this.parent().find('a.jplayer_playlist_current').length;
                    $this.parent().remove();
                    var $list_nmb_elems = $list.children().length;
                    if($list_nmb_elems > 0 && current)
                        playListNext();
                    else if($list_nmb_elems == 0){
                        $("#jquery_jplayer").jPlayer("clearFile");
                        jpTotalTime.hide();
                        jpPlayTime.hide();
                    }    
                    return false;
                }
                
                /**
                * User clicks on a song in the playlist. Plays it
                */
                function clickSong() {
                        var index = $(this).parent().index();
                        playSong(index+1);
                        return false;
                }
                
                /**
                * The next are the events for clicking on both "play" and "add to playlist" icons
                */
                $('#mp_content_wrapper').find('.mp_play').bind('click',function(){
                    var $this         = $(this);
                    var $paths        = $this.parent().siblings('.mp_song_info');
                    var title       = $paths.find('.mp_song_title').html();
                    var mp3            = $paths.find('.mp_mp3').html();
                    var ogg            = $paths.find('.mp_ogg').html();
                    var album_id     = $this.closest('.mp_content').attr('id');
                    var song_index    = $this.parent().parent().index();
                    var song_idx    = album_id + '_' + song_index;
                    //add to playlist and play the song
                    addFirst(song_idx,title,mp3,ogg);
                });
                $('#mp_content_wrapper').find('.mp_addpl').bind('click',function(){
                    var $this         = $(this);
                    var $paths        = $this.parent().siblings('.mp_song_info');
                    var title       = $paths.find('.mp_song_title').html();
                    var mp3            = $paths.find('.mp_mp3').html();
                    var ogg            = $paths.find('.mp_ogg').html();
                    var album_id     = $this.closest('.mp_content').attr('id');
                    var song_index    = $this.parent().parent().index();
                    var song_idx    = album_id + '_' + song_index;
                    //add to playlist and play the song if none is there
                    addToPlayList(song_idx,title,mp3,ogg);
                });
                
                /**
                * we want to show on the album image, the play button for playing the whole album
                */
                $('#mp_content_wrapper').find('.mp_content').bind('mouseenter',function(){
                    var $this         = $(this);
                    $this.find('.mp_playall').show();
                }).bind('mouseleave',function(){
                    var $this         = $(this);
                    $this.find('.mp_playall').hide();
                });
                
                /**
                * to play the whole album, we play the first song and add all the others to the playlist.
                * playing the first one, guarantees us that the playlist is set to empty before
                */
                $('#mp_content_wrapper').find('.mp_playall').bind('click',function(){
                    var $this         = $(this);
                    var $album        = $this.parent();
                    $album.find('.mp_play:first').trigger('click');
                    $album.find('.mp_addpl').trigger('click');
                })
                
                /**
                * playlist songs can be reordered
                */
                $list.sortable();
                $list.disableSelection();
                
            });
        </script>
<style>
.reference { font-family:Arial; position:relative; width:100%; font-size:12px; text-transform:uppercase; text-align:center; }
.reference a { color:#f9f9f9; text-decoration:none; margin-right:20px; }
</style>
</head>
<body>
<div class="mp_wrapper">
  <div id="mp_content_wrapper" class="mp_content_wrapper">
    <div class="mp_content" id="c_album_1"> <img src="music/album1/album.jpg" alt="album1"/> <a href="#" class="mp_playall">Play all</a>
      <div class="mp_description">
        <h2>Strings of Freedom</h2>
        <p> Recording began in 2009 and and we finally finished this album in the
          end of this month. Strings of Freedom is our acoustic achievement. We dedicate
          it to all our families and friends. Its about living freely and enjoy life. </p>
      </div>
      <div class="mp_songs">
        <div>
          <h3>Our Resolve</h3>
          <div class="mp_options"> <span class="mp_play">Play</span> <span class="mp_addpl">Add to playlist</span> </div>
          <div class="mp_song_info" style="display:none;"> <span class="mp_song_title">Our Resolve</span> <span class="mp_mp3">music/album1/ramblinglibrarian_-_Our_Resolve.mp3</span> <span class="mp_ogg">music/album1/ramblinglibrarian_-_Our_Resolve.ogg</span> </div>
        </div>
        <div>
          <h3>How do I make you see</h3>
          <div class="mp_options"> <span class="mp_play">Play</span> <span class="mp_addpl">Add to playlist</span> </div>
          <div class="mp_song_info" style="display:none;"> <span class="mp_song_title">How do I make you see</span> <span class="mp_mp3">music/album1/ramblinglibrarian_-_Rock_Version_-_How_Do_I_Make_You_See_1.mp3</span> <span class="mp_ogg">music/album1/ramblinglibrarian_-_Rock_Version_-_How_Do_I_Make_You_See_1.ogg</span> </div>
        </div>
      </div>
    </div>
    <div class="mp_content" id="c_album_2" style="display:none;"> <img src="music/album2/album.jpg" alt="album2"/> <a href="#" class="mp_playall">Play all</a>
      <div class="mp_description">
        <h2>Time to Shine</h2>
        <p> Experimental sounds for enjoying life and music as it comes. This album was inspired by the great
          Eduardo MacGregor who experimented with double sided guitars to achieve a unique sound experience.
          Time to shine wants to make people shine. </p>
      </div>
      <div class="mp_songs">
        <div>
          <h3>Bass (Drifting)</h3>
          <div class="mp_options"> <span class="mp_play">Play</span> <span class="mp_addpl">Add to playlist</span> </div>
          <div class="mp_song_info" style="display:none;"> <span class="mp_song_title">Bass (Drifting)</span> <span class="mp_mp3">music/album2/ramblinglibrarian_-_Bass_(Drifting).mp3</span> <span class="mp_ogg">music/album2/ramblinglibrarian_-_Bass_(Drifting).ogg</span> </div>
        </div>
        <div>
          <h3>Briefly us</h3>
          <div class="mp_options"> <span class="mp_play">Play</span> <span class="mp_addpl">Add to playlist</span> </div>
          <div class="mp_song_info" style="display:none;"> <span class="mp_song_title">Briefly us</span> <span class="mp_mp3">music/album2/ramblinglibrarian_-_Briefly_Us.mp3</span> <span class="mp_ogg">music/album2/ramblinglibrarian_-_Briefly_Us.ogg</span> </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mp_player">
    <div id="jquery_jplayer"></div>
    <div class="jp-playlist-player">
      <div class="jp-interface">
        <ul class="jp-controls">
          <li><a href="#" id="jplayer_play" class="jp-play" tabindex="1">play</a></li>
          <li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1">pause</a></li>
          <li><a href="#" id="jplayer_stop" class="jp-stop" tabindex="1">stop</a></li>
          <li><a href="#" id="jplayer_volume_min" class="jp-volume-min" tabindex="1">min volume</a></li>
          <li><a href="#" id="jplayer_volume_max" class="jp-volume-max" tabindex="1">max volume</a></li>
          <li><a href="#" id="jplayer_previous" class="jp-previous" tabindex="1">previous</a></li>
          <li><a href="#" id="jplayer_next" class="jp-next" tabindex="1">next</a></li>
        </ul>
        <div class="jp-progress">
          <div id="jplayer_load_bar" class="jp-load-bar">
            <div id="jplayer_play_bar" class="jp-play-bar"></div>
          </div>
        </div>
        <div id="jplayer_volume_bar" class="jp-volume-bar">
          <div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
        </div>
        <div id="jplayer_play_time" class="jp-play-time"></div>
        <div id="jplayer_total_time" class="jp-total-time"></div>
      </div>
      <div id="jplayer_playlist" class="jp-playlist">
        <ul>
        </ul>
      </div>
    </div>
  </div>
  <ul id="mp_albums" class="mp_albums jcarousel-skin">
    <li><img src="music/album1/thumb.jpg" alt="album1" /></li>
    <li><img src="music/album2/thumb.jpg" alt="album2" /></li>
    <li><img src="music/album1/thumb.jpg" alt="album1" /></li>
    <li><img src="music/album2/thumb.jpg" alt="album2" /></li>
    <li><img src="music/album1/thumb.jpg" alt="album1" /></li>
    <li><img src="music/album2/thumb.jpg" alt="album2" /></li>
    <li><img src="music/album1/thumb.jpg" alt="album1" /></li>
    <li><img src="music/album2/thumb.jpg" alt="album2" /></li>
  </ul>
</div>


<div style="width:550px;margin:20px auto;">
<p><strong><a href="http://www.25175.com" target="_blank">25175</a></strong></p>
</div>

</div>
</body>
</html>

 购买记录
longjuanfeng885
新兵
xdldeli
新兵
zhf_212
新兵
q349222952
新兵
优雅星空周周
新兵
cnzsq
新兵
neo0591
新兵
cping1210
新兵
iqivws
新兵
dylan
新兵
joe__2010
新兵
okmnji54
新兵
会员评论:  

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

  验证码:
 
反馈请帮助我们提高!意见反馈