SHOW:
|
|
- or go back to the newest paste.
| 1 | <html> | |
| 2 | <head> | |
| 3 | <title>xBattle Player</title> | |
| 4 | <script type="text/javascript"> | |
| 5 | window.onload = function () {
| |
| 6 | var player = new Audio; | |
| 7 | var bplay = document.getElementById('play');
| |
| 8 | var bnext = document.getElementById('next');
| |
| 9 | var bprev = document.getElementById('prev');
| |
| 10 | var bvolum = document.getElementById('volume');
| |
| 11 | var ctitle = document.getElementById('title');
| |
| 12 | - | var list = [['http://k007.kiwi6.com/hotlink/wp1i7pay90/rock_-_i_am_rock.mp3','Rock - I Am Rock'], |
| 12 | + | var list = [ |
| 13 | - | ['http://k007.kiwi6.com/hotlink/n2mgmg4z8r/linkin.mp3','Linkin Park - CASTLE OF GLASS'], |
| 13 | + | ['piesa1.mp3','Nume1'], |
| 14 | - | ['http://k007.kiwi6.com/hotlink/7345o21bo7/hardwellspaceman.mp3','Hardwell - Spaceman'], |
| 14 | + | ['piesa2.mp3','Nume2'], |
| 15 | - | ['http://k007.kiwi6.com/hotlink/cadaqmymtv/linkin_park_-_in_the_end.mp3','Linkin Park - In the end'], |
| 15 | + | ['piesa3.mp3','Nume3'] |
| 16 | - | ['http://k007.kiwi6.com/hotlink/43j9ocga54/rammstein_-_sonne.mp3','Rammstein - Stonne'], |
| 16 | + | ]; |
| 17 | - | ['http://k007.kiwi6.com/hotlink/1977vs4lap/asian_dub_foundation_-_fortress_europe.mp3','Asian Dub Foundation - Fortress Europe'], |
| 17 | + | |
| 18 | - | ['http://k007.kiwi6.com/hotlink/ffjq7sil65/rob_zombie_-_two_lane_blacktop.mp3','Rob Zombie - Two lane blacktop']]; |
| 18 | + | |
| 19 | ||
| 20 | function Change(track) {
| |
| 21 | player.setAttribute('src', list[track][0]);
| |
| 22 | ctitle.innerText = list[track][1]; | |
| 23 | ctitle.style.display = 'inherit'; | |
| 24 | setTimeout(function(){
| |
| 25 | ctitle.style.display = 'none'; | |
| 26 | },3000); | |
| 27 | player.play(); | |
| 28 | bplay.src = "img/pause.png"; | |
| 29 | } | |
| 30 | ||
| 31 | ||
| 32 | player.volume = 0.7; | |
| 33 | ||
| 34 | bplay.addEventListener("click", function() {
| |
| 35 | - | player.canPlayType('audio/wav;codecs="1"');
|
| 35 | + | |
| 36 | if (player.currentSrc == '') Change(0); | |
| 37 | player.play(); | |
| 38 | bplay.src = "img/pause.png"; | |
| 39 | } else {
| |
| 40 | player.pause(); | |
| 41 | bplay.src = "img/play.png"; | |
| 42 | } | |
| 43 | }, false); | |
| 44 | ||
| 45 | bnext.addEventListener("click", function() {
| |
| 46 | if (curTack+1 == list.length) curTack = 0; else curTack++; | |
| 47 | Change(curTack); | |
| 48 | }, false); | |
| 49 | ||
| 50 | bprev.addEventListener("click", function() {
| |
| 51 | if (curTack == 0) curTack = list.length-1; else curTack--; | |
| 52 | Change(curTack); | |
| 53 | }, false); | |
| 54 | ||
| 55 | bvolum.addEventListener("change", function() {
| |
| 56 | player.volume = this.value/100; | |
| 57 | }, false); | |
| 58 | ||
| 59 | player.addEventListener("ended", function() {
| |
| 60 | bnext.click(); | |
| 61 | }, false); | |
| 62 | ||
| 63 | bplay.click(); | |
| 64 | } | |
| 65 | </script> | |
| 66 | <style type="text/css"> | |
| 67 | #player {
| |
| 68 | background: #fff; | |
| 69 | border: #444 1px solid; | |
| 70 | width: 120px; | |
| 71 | padding: 3px; | |
| 72 | position: fixed; | |
| 73 | bottom: 0px; | |
| 74 | left: 0px; | |
| 75 | z-index: 9999; | |
| 76 | } | |
| 77 | ||
| 78 | #player:hover > #title {
| |
| 79 | display:inherit; | |
| 80 | } | |
| 81 | ||
| 82 | #title {
| |
| 83 | display: none; | |
| 84 | font-family: Tahoma; | |
| 85 | font-size: 10px; | |
| 86 | white-space:nowrap; | |
| 87 | overflow:hidden; | |
| 88 | } | |
| 89 | ||
| 90 | #player #buttons {
| |
| 91 | margin-top: 2px; | |
| 92 | } | |
| 93 | ||
| 94 | #player img:hover {
| |
| 95 | background: #ccc; | |
| 96 | } | |
| 97 | ||
| 98 | #player input[type='range'] {
| |
| 99 | -webkit-appearance: none !important; | |
| 100 | background:black; | |
| 101 | height:2px; | |
| 102 | width: 60px; | |
| 103 | margin-top: 4px; | |
| 104 | position: absolute; | |
| 105 | bottom: 10px; | |
| 106 | right: 5px; | |
| 107 | } | |
| 108 | ||
| 109 | #player #play {
| |
| 110 | margin-right: 5px; | |
| 111 | margin-left: 5px; | |
| 112 | } | |
| 113 | ||
| 114 | #player input[type='range']::-webkit-slider-thumb {
| |
| 115 | -webkit-appearance: none !important; | |
| 116 | background: #333; | |
| 117 | height: 6px; | |
| 118 | width: 9px; | |
| 119 | } | |
| 120 | </style> | |
| 121 | </head> | |
| 122 | <body> | |
| 123 | <div id="player"> | |
| 124 | <div id="title"></div> | |
| 125 | ||
| 126 | <div id="buttons"> | |
| 127 | <img src="img/play.png" id="play"/> | |
| 128 | <img src="img/prev.png" id="prev"/> | |
| 129 | <img src="img/next.png" id="next"/> | |
| 130 | </div> | |
| 131 | ||
| 132 | <div id="slider"> | |
| 133 | <input id="volume" type="range" min="0" value="70" max="100" step="1" /> | |
| 134 | </div> | |
| 135 | </div> | |
| 136 | </body> | |
| 137 | </html> |
