首页>>音乐/视频>>友好的自定义音乐播放器，支持mp3 ogg wav(2014-05-22)

友好的自定义音乐播放器，支持mp3 ogg wav

 演示页面无媒体文件，请自行查看源码拷贝后添加媒体文件

友好的自定义音乐播放器，支持mp3 ogg wav
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="wrapper">  
  2.   
  3.       
  4.   
  5.     <audio preload="auto" controls>  
  6.         <source src="audio.mp3" />  
  7.         <source src="audio.ogg" />  
  8.         <source src="audio.wav" />  
  9.     </audio>  
  10.   
  11.       
  12.   
  13. </div>  

css

 

CSS Code
  1. /* 
  2.         PLAYER 
  3.     */  
  4.   
  5.     .audioplayer  
  6.     {  
  7.         height: 2.5em; /* 40 */  
  8.         color: #fff;  
  9.         text-shadow: 1px 1px 0 #000;  
  10.         border: 1px solid #222;  
  11.         position: relative;  
  12.         z-index: 1;  
  13.         background: #333;  
  14.     }  
  15.   
  16.   
  17.         /* mini mode (fallback) */  
  18.   
  19.         .audioplayer-mini  
  20.         {  
  21.             width: 2.5em; /* 40 */  
  22.             margin: 0 auto;  
  23.         }  
  24.   
  25.   
  26.         /* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */  
  27.   
  28.         .audioplayer > div  
  29.         {  
  30.             position: absolute;  
  31.         }  
  32.   
  33.   
  34.         /* play/pause button */  
  35.   
  36.         .audioplayer-playpause  
  37.         {  
  38.             width: 2.5em; /* 40 */  
  39.             height: 100%;  
  40.             text-align: left;  
  41.             text-indent: -9999px;  
  42.             cursor: pointer;  
  43.             z-index: 2;  
  44.             top: 0;  
  45.             left: 0;  
  46.         }  
  47.             .audioplayer:not(.audioplayer-mini) .audioplayer-playpause  
  48.             {  
  49.                 border-right: 1px solid #555;  
  50.                 border-right-color: rgba( 255, 255, 255, .1 );  
  51.             }  
  52.             .audioplayer-mini .audioplayer-playpause  
  53.             {  
  54.                 width: 100%;  
  55.             }  
  56.             .audioplayer-playpause:hover,  
  57.             .audioplayer-playpause:focus  
  58.             {  
  59.                 background-color: #222;  
  60.             }  
  61.             .audioplayer-playpause a  
  62.             {  
  63.                 display: block;  
  64.             }  
  65.             .audioplayer-stopped .audioplayer-playpause a  
  66.             {  
  67.                 width: 0;  
  68.                 height: 0;  
  69.                 border: 0.5em solid transparent; /* 8 */  
  70.                 border-right: none;  
  71.                 border-left-color: #fff;  
  72.                 content: '';  
  73.                 position: absolute;  
  74.                 top: 50%;  
  75.                 left: 50%;  
  76.                 margin: -0.5em 0 0 -0.25em; /* 8 4 */  
  77.             }  
  78.             .audioplayer-playing .audioplayer-playpause a  
  79.             {  
  80.                 width: 0.75em; /* 12 */  
  81.                 height: 0.75em; /* 12 */  
  82.                 position: absolute;  
  83.                 top: 50%;  
  84.                 left: 50%;  
  85.                 margin: -0.375em 0 0 -0.375em; /* 6 */  
  86.             }  
  87.                 .audioplayer-playing .audioplayer-playpause a:before,  
  88.                 .audioplayer-playing .audioplayer-playpause a:after  
  89.                 {  
  90.                     width: 40%;  
  91.                     height: 100%;  
  92.                     background-color: #fff;  
  93.                     content: '';  
  94.                     position: absolute;  
  95.                     top: 0;  
  96.                 }  
  97.                 .audioplayer-playing .audioplayer-playpause a:before  
  98.                 {  
  99.                     left: 0;  
  100.                 }  
  101.                 .audioplayer-playing .audioplayer-playpause a:after  
  102.                 {  
  103.                     rightright: 0;  
  104.                 }  
  105.   
  106.   
  107.         /* timers */  
  108.   
  109.         .audioplayer-time  
  110.         {  
  111.             width: 4.375em; /* 70 */  
  112.             height: 100%;  
  113.             line-height: 2.375em; /* 38 */  
  114.             text-align: center;  
  115.             z-index: 2;  
  116.             top: 0;  
  117.         }  
  118.             .audioplayer-time-current  
  119.             {  
  120.                 border-left: 1px solid #111;  
  121.                 border-left-color: rgba( 0, 0, 0, .25 );  
  122.                 left: 2.5em; /* 40 */  
  123.             }  
  124.             .audioplayer-time-duration  
  125.             {  
  126.                 border-right: 1px solid #555;  
  127.                 border-right-color: rgba( 255, 255, 255, .1 );  
  128.                 rightright: 2.5em; /* 40 */  
  129.             }  
  130.                 .audioplayer-novolume .audioplayer-time-duration  
  131.                 {  
  132.                     border-right: 0;  
  133.                     rightright: 0;  
  134.                 }  
  135.   
  136.   
  137.         /* progress bar of loaded/played */  
  138.   
  139.         .audioplayer-bar  
  140.         {  
  141.             height: 0.875em; /* 14 */  
  142.             background-color: #222;  
  143.             cursor: pointer;  
  144.             z-index: 1;  
  145.             top: 50%;  
  146.             rightright: 6.875em; /* 110 */  
  147.             left: 6.875em; /* 110 */  
  148.             margin-top: -0.438em; /* 7 */  
  149.         }  
  150.             .audioplayer-novolume .audioplayer-bar  
  151.             {  
  152.                 rightright: 4.375em; /* 70 */  
  153.             }  
  154.             .audioplayer-bar div  
  155.             {  
  156.                 width: 0;  
  157.                 height: 100%;  
  158.                 position: absolute;  
  159.                 left: 0;  
  160.                 top: 0;  
  161.             }  
  162.             .audioplayer-bar-loaded  
  163.             {  
  164.                 background-color: #333;  
  165.                 z-index: 1;  
  166.             }  
  167.             .audioplayer-bar-played  
  168.             {  
  169.                 background: #007fd1;  
  170.                 z-index: 2;  
  171.             }  
  172.   
  173.   
  174.         /* volume button */  
  175.   
  176.         .audioplayer-volume  
  177.         {  
  178.             width: 2.5em; /* 40 */  
  179.             height: 100%;  
  180.             border-left: 1px solid #111;  
  181.             border-left-color: rgba( 0, 0, 0, .25 );  
  182.             text-align: left;  
  183.             text-indent: -9999px;  
  184.             cursor: pointer;  
  185.             z-index: 2;  
  186.             top: 0;  
  187.             rightright: 0;  
  188.         }  
  189.             .audioplayer-volume:hover,  
  190.             .audioplayer-volume:focus  
  191.             {  
  192.                 background-color: #222;  
  193.             }  
  194.             .audioplayer-volume-button  
  195.             {  
  196.                 width: 100%;  
  197.                 height: 100%;  
  198.             }  
  199.                 .audioplayer-volume-button a  
  200.                 {  
  201.                     width: 0.313em; /* 5 */  
  202.                     height: 0.375em; /* 6 */  
  203.                     background-color: #fff;  
  204.                     display: block;  
  205.                     position: relative;  
  206.                     z-index: 1;  
  207.                     top: 40%;  
  208.                     left: 35%;  
  209.                 }  
  210.                     .audioplayer-volume-button a:before,  
  211.                     .audioplayer-volume-button a:after  
  212.                     {  
  213.                         content: '';  
  214.                         position: absolute;  
  215.                     }  
  216.                     .audioplayer-volume-button a:before  
  217.                     {  
  218.                         width: 0;  
  219.                         height: 0;  
  220.                         border: 0.5em solid transparent; /* 8 */  
  221.                         border-left: none;  
  222.                         border-right-color: #fff;  
  223.                         z-index: 2;  
  224.                         top: 50%;  
  225.                         rightright: -0.25em;  
  226.                         margin-top: -0.5em; /* 8 */  
  227.                     }  
  228.                     .audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a:after  
  229.                     {  
  230.                         /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */  
  231.                         width: 0.313em; /* 5 */  
  232.                         height: 0.313em; /* 5 */  
  233.                         border: 0.25em double #fff; /* 4 */  
  234.                         border-width: 0.25em 0.25em 0 0; /* 4 */  
  235.                         left: 0.563em; /* 9 */  
  236.                         top: -0.063em; /* 1 */  
  237.                         -webkit-border-radius: 0 0.938em 0 0; /* 15 */  
  238.                         -moz-border-radius: 0 0.938em 0 0; /* 15 */  
  239.                         border-radius: 0 0.938em 0 0; /* 15 */  
  240.                         -webkit-transform: rotate( 45deg );  
  241.                         -moz-transform: rotate( 45deg );  
  242.                         -ms-transform: rotate( 45deg );  
  243.                         -o-transform: rotate( 45deg );  
  244.                         transform: rotate( 45deg );  
  245.                     }  
  246.   
  247.   
  248.             /* volume dropdown */  
  249.   
  250.             .audioplayer-volume-adjust  
  251.             {  
  252.                 height: 6.25em; /* 100 */  
  253.                 cursor: default;  
  254.                 position: absolute;  
  255.                 left: 0;  
  256.                 rightright: -1px;  
  257.                 top: -9999px;  
  258.                 background: #333;  
  259.             }  
  260.                 .audioplayer-volume:not(:hover) .audioplayer-volume-adjust  
  261.                 {  
  262.                     opacity: 0;  
  263.                 }  
  264.                 .audioplayer-volume:hover .audioplayer-volume-adjust  
  265.                 {  
  266.                     top: auto;  
  267.                     bottombottom: 100%;  
  268.                 }  
  269.                 .audioplayer-volume-adjust > div  
  270.                 {  
  271.                     width: 40%;  
  272.                     height: 80%;  
  273.                     background-color: #222;  
  274.                     cursor: pointer;  
  275.                     position: relative;  
  276.                     z-index: 1;  
  277.                     margin: 30% auto 0;  
  278.                 }  
  279.                     .audioplayer-volume-adjust div div  
  280.                     {  
  281.                         width: 100%;  
  282.                         height: 100%;  
  283.                         position: absolute;  
  284.                         bottombottom: 0;  
  285.                         left: 0;  
  286.                         background: #007fd1;  
  287.                     }  
  288.             .audioplayer-novolume .audioplayer-volume  
  289.             {  
  290.                 display: none;  
  291.             }  
  292.   
  293.   
  294.         /* CSS3 decorations */  
  295.   
  296.         body  
  297.         {  
  298.             -webkit-box-shadow: inset 0 0 18.75em rgba( 0, 0, 0, .5 ); /* 300 */  
  299.             -moz-box-shadow: inset 0 0 18.75em rgba( 0, 0, 0, 5 ); /* 300 */  
  300.             box-shadow: inset 0 0 18.75em rgba( 0, 0, 0, .5 ); /* 300 */  
  301.         }  
  302.         .audioplayer  
  303.         {  
  304.             -webkit-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 ); /* 20 */  
  305.             -moz-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 ); /* 20 */  
  306.             box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 ); /* 20 */  
  307.         }  
  308.         .audioplayer-volume-adjust  
  309.         {  
  310.             -webkit-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );  
  311.             -moz-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );  
  312.             box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );  
  313.         }  
  314.         .audioplayer-bar,  
  315.         .audioplayer-volume-adjust > div  
  316.         {  
  317.             -webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );  
  318.             -moz-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );  
  319.             box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );  
  320.         }  
  321.         .audioplayer-volume-adjust div div,  
  322.         .audioplayer-bar-played  
  323.         {  
  324.             -webkit-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );  
  325.             -moz-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );  
  326.             box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );  
  327.         }  
  328.         .audioplayer-playpause,  
  329.         .audioplayer-volume a  
  330.         {  
  331.             -webkit-filter: drop-shadow( 1px 1px 0 #000 );  
  332.             -moz-filter: drop-shadow( 1px 1px 0 #000 );  
  333.             -ms-filter: drop-shadow( 1px 1px 0 #000 );  
  334.             -o-filter: drop-shadow( 1px 1px 0 #000 );  
  335.             filter: drop-shadow( 1px 1px 0 #000 );  
  336.         }  
  337.         .audioplayer,  
  338.         .audioplayer-volume-adjust  
  339.         {  
  340.             background: -webkit-gradient( linear, left top, left bottombottom, from( #444 ), to( #222 ) );  
  341.             background: -webkit-linear-gradient( top, #444, #222 );  
  342.             background: -moz-linear-gradient( top, #444, #222 );  
  343.             background: -ms-radial-gradient( top, #444, #222 );  
  344.             background: -o-linear-gradient( top, #444, #222 );  
  345.             background: linear-gradient( to bottombottom, #444, #222 );  
  346.         }  
  347.         .audioplayer-bar-played  
  348.         {  
  349.             background: -webkit-gradient( linear, left top, rightright top, from( #007fd1 ), to( #c600ff ) );  
  350.             background: -webkit-linear-gradient( left, #007fd1, #c600ff );  
  351.             background: -moz-linear-gradient( left, #007fd1, #c600ff );  
  352.             background: -ms-radial-gradient( left, #007fd1, #c600ff );  
  353.             background: -o-linear-gradient( left, #007fd1, #c600ff );  
  354.             background: linear-gradient( to rightright, #007fd1, #c600ff );  
  355.         }  
  356.         .audioplayer-volume-adjust div div  
  357.         {  
  358.             background: -webkit-gradient( linear, left bottombottom, left top, from( #007fd1 ), to( #c600ff ) );  
  359.             background: -webkit-linear-gradient( bottombottom, #007fd1, #c600ff );  
  360.             background: -moz-linear-gradient( bottombottom, #007fd1, #c600ff );  
  361.             background: -ms-radial-gradient( bottombottom, #007fd1, #c600ff );  
  362.             background: -o-linear-gradient( bottombottom, #007fd1, #c600ff );  
  363.             background: linear-gradient( to top, #007fd1, #c600ff );  
  364.         }  
  365.         .audioplayer-bar,  
  366.         .audioplayer-bar div,  
  367.         .audioplayer-volume-adjust div  
  368.         {  
  369.             -webkit-border-radius: 4px;  
  370.             -moz-border-radius: 4px;  
  371.             border-radius: 4px;  
  372.         }  
  373.         .audioplayer  
  374.         {  
  375.             -webkit-border-radius: 2px;  
  376.             -moz-border-radius: 2px;  
  377.             border-radius: 2px;  
  378.         }  
  379.         .audioplayer-volume-adjust  
  380.         {  
  381.             -webkit-border-top-left-radius: 2px;  
  382.             -webkit-border-top-rightright-radius: 2px;  
  383.             -moz-border-radius-topleft: 2px;  
  384.             -moz-border-radius-topright: 2px;  
  385.             border-top-left-radius: 2px;  
  386.             border-top-rightright-radius: 2px;  
  387.         }  
  388.         .audioplayer *,  
  389.         .audioplayer *:before,  
  390.         .audioplayer *:after  
  391.         {  
  392.             -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;  
  393.             -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;  
  394.             -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;  
  395.             -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;  
  396.             transition: color .25s ease, background-color .25s ease, opacity .5s ease;  
  397.         }  

 


原文地址:http://www.freejs.net/article_yingyueshipin_341.html