https://www.sumadhwaseva.com/wp-content/plugins/inline-mp3-player/javascripts/Player.js

1// Programmed by [email protected]
2// Feel free to use and modify this.
3
4	function Player() {
5		this.place = 'top';
6		this.backward = 0;
7
8        this.sound = new Sound();
9		this.playing = false;
10		this.loaded = false;
11		this.frequency = 100;
12		this.song = '';
13		this.slide = 0;
14		this.hidden = 1;
15        this.slider = NaN;
16		this.id = '';
17		this.timeleft = 5;
18		this.position = 0;
19      	this.registerCallback();      
20	}
21
22	Player.prototype.sliding = function(position) {
23		this.slide=1;
24	    var duration =  this.sound.getDuration();
25
26		var timeleft = (duration - (duration * position));
27        if (this.backward == 0) {
28		    timeleft = (duration * position);
29        }
30		var rest = (timeleft % 60000);
31		var seconds = Math.round(rest/1000);
32		var minutes = Math.round((timeleft - rest) / 60000);
33		if (!(isNaN(minutes)) && !(isNaN(seconds))) {
34			document.getElementById('handle1').innerHTML = sprintf("<span class='time'>%d:%02d</span>",minutes,seconds); 
35		}
36	}
37
38	Player.prototype.change = function(position) {
39		if (this.slide > 0) {
40			this.sound.stop();
41			this.slide = 0;
42			this.setPosition(position);
43		}
44	}
45
46    Player.prototype.registerCallback = function() {
47   	   setInterval(this.onTimerEvent.bind(this), this.frequency);
48    }
49
50	Player.prototype.play = function(song,id) {
51
52		if (this.playing) {
53			if (this.song == song) {
54                this.onSoundComplete();
55            } else {
56                this.onSoundComplete();
57
58				this.id = id;
59				this.song = song;
60
61				this.sound.loadSound(song, true);
62		  		document.getElementById(this.id).className = 'playing'; 
63				this.playing = true;
64			}
65		} else {
66			this.sound.loadSound(song, true);
67			this.id = id;
68			this.song = song;
69			document.getElementById(this.id).className = 'playing'; 
70			this.playing = true;
71		}
72
73        listitem = document.getElementById(id);
74        if (this.playing) {
75            showslider(id);
76            slideobj = document.getElementById('slider');
77            slideobj.style.width = (listitem.scrollWidth) + "px";
78            slideobj.style.height = "2px";
79            handleobj = document.getElementById('handle1');
80            handleobj.style.height = (listitem.scrollHeight) + "px";
81
82            if (isNaN(this.slider)) {
83                this.slider = new Control.Slider('handle1','slider',{
84                      sliderValue:0,
85                      onSlide:function(v){player.sliding(v);},
86                      onChange:function(v){player.change(v)}});
87            }
88            this.slider.handleLength = 30;
89            this.slider.trackLength = listitem.scrollWidth;
90        }
91        listitem.blur();
92
93		return false;
94	}
95
96
97   Player.prototype.setPosition = function(pos) {
98   	var newpos = (this.duration*pos);
99	this.sound.start(Math.round(newpos/1000),1);
100   }
101
102   Player.prototype.onTimerEvent = function() {
103      if(this.playing) {
104          var position = this.sound.getPosition();
105          this.position = position;
106          
107          var duration =  this.sound.getDuration();
108          this.duration = duration;
109
110          var progress = position/duration;
111		  this.timeleft = duration - position;
112
113          position = this.position;
114          if (this.backward == 1) {
115            position = this.timeleft;
116          }
117          
118		  var rest = (position % 60000);
119		  var seconds = Math.round(rest/1000);
120		  var minutes = Math.round((position - rest) / 60000);
121		  if (seconds == 60) {
122		    seconds = 0;
123		  	minutes = minutes + 1;
124		  }
125		   if (!(isNaN(minutes)) && !(isNaN(seconds))) {
126		      if (this.slide == 0) {
127				  document.getElementById('handle1').innerHTML = sprintf("<span class='time'>%d:%02d</span>",minutes,seconds); 
128			  }
129			  if ((this.timeleft == 0) && (this.duration > 0)) {
130				this.onSoundComplete();
131			  }
132		  }
133		  if (this.slide == 0) {
134		  	if (isNaN(progress)) {
135				progress = 0
136			}
137		        this.slider.setValue(progress);
138		  }
139      }
140   }
141
142   Player.prototype.onSoundComplete = function() {
143			document.getElementById(this.id).className = 'silent'; 
144			hideslider();
145			this.sound.start(0,1);
146			this.sound.stop();
147			this.hidden = 1;
148			this.song = '';
149			this.playing = false;

150			this.id = '';
151   }
152
153   function showslider(id) {
154        var div_slider = document.createElement('div')
155        div_slider.id = 'slider';
156        var div_handle = document.createElement('div')
157        div_handle.id = 'handle1';
158        Element.extend(div_slider);
159        div_slider.appendChild(div_handle)
160        document.body.appendChild(div_slider);
161
162		listitem = document.getElementById(id);
163		slideobj = document.getElementById('slider');
164		handleobj = document.getElementById('handle1');
165   		if (slideobj.style.visibility != 'visible') {
166			slideobj.style.display = 'none';
167			slideobj.style.visibility = 'visible';
168		}
169        var slidetop = getPos(listitem).y;
170		slideobj.style.left = (getPos(listitem).x) + "px";
171		slideobj.style.top = (slidetop) + "px";
172		slideobj.style.position = "absolute";
173        switch(player.place) {
174            case 'top':
175                handleobj.style.top = "-" + $(id).getDimensions().height + "px";
176                break
177            case 'bottom':
178                handleobj.style.top = $(id).getDimensions().height + "px";
179                break
180            default:
181                // leave it
182        }
183		if (slideobj.style.display == 'none') {
184            slideobj.style.display = 'block';
185		}
186
187        if (player.hidden) {
188            player.hidden = 0;
189        }
190
191   }
192
193   function hideslider() {
194		slideobj = document.getElementById('slider');
195        if (slideobj) {
196            if (slideobj.style.visibility == 'visible') {
197                slideobj.style.display = 'none';
198                slideobj.style.visibility = 'hidden';
199                slideobj.style.left = "0px";
200                slideobj.style.width = "0px";
201                slideobj.style.top = "0px";
202            }
203        }
204        slideobj.remove();
205   }
206
207    function getPos (obj) {
208        var pos = {x: obj.offsetLeft||0, y: obj.offsetTop||0};
209        while(obj = obj.offsetParent) {
210            pos.x += obj.offsetLeft||0;
211            pos.y += obj.offsetTop||0;
212        }
213        return pos;
214    }
215
216
217    Event.onDOMReady(function() {
218
219        if (window.jQuery) {
220            jQuery.noConflict();
221        }
222
223        var thelinks = $$('a');
224        var count = 0;
225        var mp3match = /mp3$/;
226        player = new Player();
227
228        thelinks.each(function(item) {
229            if (item.href.match(mp3match)) {
230                count += 1;
231                item.id = "mp3inline" + count;
232                item.className = "silent";
233                item.onclick = function() { return player.play(item.href, item.id); }
234            }
235        });
236
237    });
238
239
240