1class minibplay { 2 constructor (opts){ 3 var _this = this; 4 this.ads = []; 5 this.opts = Object.assign({ 6 type : 'audio', 7 volume : 0.8, 8 timeinfos : '' 9 },opts); 10 this.audio = _this.opts.audio; 11 if(this.audio.getAttribute('data-timeinfos')!=null){ 12 this.opts.timeinfos = this.audio.getAttribute('data-timeinfos'); 13 } 14 this.audio.style.display = 'none'; 15 this.audio.setAttribute('preload','metadata'); 16 this.player = document.createElement('div'); 17 this.audio.parentNode.insertBefore(this.player,this.audio); 18 this.player.minibplay = this; 19 this.player.classList.add('minibplay'); 20 this.player.innerHTML = '<div class="minibplay-ctrl"> \ 21 <div> \ 22 <button class="play"></button> \ 23 <button class="pause"></button> \ 24 </div> \ 25 <div class="infos-time" style="white-space:nowrap;"> \ 26 <span class="timeinfos"></span> \ 27 <span class="time">00:00</span><span class="duration">00:00</span> \ 28 </div> \ 29 <div class="infos-timeline" style="padding: 0 16px;"> \ 30 <input class="timeline" value="0" type="range" max="1" min="0" step="0.01"> \ 31 </div> \ 32 <div class="volume"> \ 33 <input class="ctrl" value="1" type="range" max="1" min="0" step="0.01"> \ 34 <button class="mute"></button> \ 35 <button class="low"></button> \ 36 <button class="high"></button> \ 37 </div> \ 38 </div>'; 39 this.player.classList.add('minibplay'); 40 this.ctrl = { 41 play : this.player.querySelector('.minibplay-ctrl .play'), 42 pause : this.player.querySelector('.minibplay-ctrl .pause'), 43 volume : { 44 mute : this.player.querySelector('.minibplay-ctrl .volume .mute'), 45 low : this.player.querySelector('.minibplay-ctrl .volume .low'), 46 high : this.player.querySelector('.minibplay-ctrl .volume .high'), 47 ctrl : this.player.querySelector('.minibplay-ctrl .volume .ctrl') 48 }, 49 time : this.player.querySelector('.minibplay-ctrl .time'), 50 timeinfos : this.player.querySelector('.minibplay-ctrl .timeinfos'), 51 duration : this.player.querySelector('.minibplay-ctrl .duration'), 52 timeline : this.player.querySelector('.minibplay-ctrl .timeline') 53 } 54 /* event */ 55 this.audio.addEventListener('loadedmetadata', (e) => { this.loadedmetadata(e) }); 56 this.audio.addEventListener('timeupdate', (e) => { this.timeupdate(e) }); 57 this.audio.addEventListener('progress', (e) => { 58 if(Math.round(e.timeStamp/60)>this.state.duration){ 59 this.state.duration = Math.round(e.timeStamp/60); 60 this.change(); 61 } 62 }); 63 this.audio.addEventListener('play', (e) => { 64 dataLayer.push({ 65 'event': 'audio', 66 'audioPlayerAction': 'play', 67 'audioTitle': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) 68 }); 69 }); 70 this.audio.addEventListener('pause', (e) => { 71 dataLayer.push({ 72 'event': 'audio', 73 'audioPlayerAction': 'pause', 74 'audioTitle': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]), 75 'audioValue': this.state.currentTime 76 }); 77 }); 78 this.audio.addEventListener('ended', (e) => { 79 dataLayer.push({ 80 'event': 'audio', 81 'audioPlayerAction': 'finished', 82 'audioTitle': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) 83 }); 84 }); 85 this.audio.addEventListener('timeupdate', (e) => { }); 86 this.ctrl.volume.ctrl.addEventListener('input', (e) => { this.volume(e) }); 87 if(this.ctrl.timeline!=null){this.ctrl.timeline.addEventListener('input', (e) => { this.timeline(e) });} 88 this.ctrl.play.addEventListener('click', () => { this.play(); }); 89 this.ctrl.pause.addEventListener('click', () => { this.pause() }); 90 this.ctrl.volume.mute.addEventListener('click', () => { this.mute() }); 91 this.ctrl.volume.low.addEventListener('click', () => { this.mute() }); 92 this.ctrl.volume.high.addEventListener('click', () => { this.mute() }); 93 /* state */ 94 this.state = { 95 playing: false, 96 playing_ads:false, 97 currentTime : 0, 98 duration : 0, 99 volume : this.opts.volume, 100 volumeType : 'high', 101 muted : false, 102 fullscreen : false, 103 artist : '', 104 title : '', 105 vast_url : '', 106 vast_active : true 107 }; 108 this.player.setAttribute('data-playing',this.state.playing?1:0); 109 this.player.setAttribute('data-volume',this.state.volume); 110 this.player.setAttribute('data-muted',this.state.muted?1:0); 111 this.player.setAttribute('data-volume-type',this.state.volumeType); 112 this.player.appendChild(this.audio); 113 this.player.classList.add('loaded'); 114 this.change(); 115 if(this.audio.hasAttributes('vast-url') && this.audio.getAttribute('vast-url')!=''){ 116 this.state.vast_url = this.audio.getAttribute('vast-url'); 117 } 118 if(this.audio.hasAttributes('vast-active') && this.audio.getAttribute('vast-active')=='false'){ 119 this.state.vast_active = false;
120 } 121 this.vast = { 122 url : _this.state.vast_url || '', 123 player : _this.player, 124 list : [], 125 initialized : false, 126 init : async function(){ 127 this.initialized = true; 128 if(_this.state.vast_active==false){ return; } 129 if(this.url=='' && document.minibplayVastUrl!=null && document.minibplayVastUrl!='') { 130 this.url = document.minibplayVastUrl.replace(/\[placeholder\]/gi,new Date().getTime()); 131 } 132 if(this.url!=''){ 133 try { 134 if(googletag!=null && googletag.pubads!=null && googletag.pubads().getTargetingKeys!=null){ 135 var uparams = ''; 136 for(var p of googletag.pubads().getTargetingKeys()){ 137 if(googletag.pubads().getTargeting(p).length>0){ 138 uparams += '&' + p + '=' + googletag.pubads().getTargeting(p).join(','); 139 uparams.replace(/\,$/gi,''); 140 } 141 } 142 uparams.replace(/^\&/gi,''); 143 this.url += (uparams!=''?'&cust_params='+encodeURIComponent(uparams):''); 144 } 145 } catch (err){ }; 146 await this.load(this.url); 147 } 148 }, 149 load : async function(vast_url,vast_options){ 150 var res = await fetch(vast_url); 151 var text = await res.text(); 152 var xml = new DOMParser().parseFromString(text,"text/xml"); 153 var vast_options = vast_options || { position : 'preroll' }; 154 try { 155 for(var vast_ad of xml.getElementsByTagName("Ad")){ 156 if(vast_ad.getElementsByTagName("Extension").length>0 && vast_ad.getElementsByTagName("Extension")[0].getAttribute('type')=='ad-position'){ 157 vast_options.position = vast_ad.getElementsByTagName("Extension")[0].textContent.trim(); 158 } 159 if(vast_ad.getElementsByTagName("VASTAdTagURI").length>0){ 160 await this.load(vast_ad.getElementsByTagName("VASTAdTagURI")[0].textContent.trim(),{ position : vast_options.position }); 161 } else { 162 var tracking = []; 163 if(vast_ad.getElementsByTagName("Tracking").length>0){ 164 for(var t of vast_ad.getElementsByTagName("Tracking")){ 165 tracking.push({'event':t.getAttribute('event'),'url':t.textContent.trim()}); 166 } 167 } 168 /* console.log(tracking); */ 169 this.addAudio({ 170 position : vast_options.position, 171 duration : vast_ad.getElementsByTagName("Duration")[0].textContent.trim(), 172 file : vast_ad.getElementsByTagName("MediaFile")[0].textContent.trim(), 173 tracking : tracking 174 }); 175 } 176 } 177 } catch (err){ 178 console.log('VAST : error to load ',vast_url,vast_options); 179 } 180 }, 181 addAudio : async function(vast_options){ 182 var vast_ad = vast_options; 183 var vast_audio = document.createElement('audio'); 184 vast_audio.classList.add('vast-ad'); 185 vast_audio.src = vast_options.file; 186 vast_audio.setAttribute('data-position',vast_options.position); 187 vast_audio.setAttribute('data-duration',vast_options.duration); 188 vast_audio.setAttribute('loop','false'); 189 vast_audio.loop = false; 190 vast_audio.tracking = vast_options.tracking || []; 191 console.log(vast_audio.tracking); 192 vast_audio.track = function(e){ 193 for(var t of this.tracking){ 194 if(t.event==e){ 195 fetch(t.url); 196 console.log(t); 197 } 198 } 199 } 200 vast_audio.addEventListener('loaded', (e) => { e.target.track('loaded'); } ); 201 vast_audio.addEventListener('play', (e) => { if(e.target.started==null){ e.target.track('start'); e.target.started=true; } else { e.target.track('resume'); } } ); 202 vast_audio.addEventListener('timeupdate', (e) => { 203 e.target.closest('.minibplay').minibplay.ctrl.time.innerHTML = Math.round(vast_options.duration-e.target.currentTime) + ' sec'; 204 }); 205 vast_audio.addEventListener('pause', (e) => { 206 e.target.track('pause'); 207 e.target.closest('.minibplay').minibplay.change(); 208 }); 209 vast_audio.addEventListener('ended', (e) => { 210 e.target.track('complete'); 211 e.target.state = 'ended'; 212 e.target.closest('.minibplay').minibplay.play(); 213 e.target.closest('.minibplay').minibplay.change(); 214 }); 215 vast_audio.addEventListener('stop', (e) => { e.target.track('stop'); } ); 216 this.player.appendChild(vast_audio); 217 this.player.minibplay.ads = this.player.minibplay.ads || []; 218 vast_ad.audio = vast_audio; 219 vast_ad.duration = parseInt((parseInt(vast_options.duration.split(':')[0])*60*60) + (parseInt(vast_options.duration.split(':')[1]*60)) + parseInt(vast_options.duration.split(':')[2])); 220 vast_ad.state = 'initialized'; 221 this.player.minibplay.ads.push(vast_ad); 222 } 223 } 224 /* this.audio.addEventListener('minibplay-loaded',function(e){ 225 console.log('minibplay-loaded'); 226 console.log(_this); 227 }); */ 228 setTimeout(() => { 229 _this.audio.src = _this.audio.src; 230 this.change(); 231 // console.log('dispatch',_this.audio); 232 _this.audio.dispatchEvent(new CustomEvent('minibplay-loaded'));
233 // _this.vast.init(); 234 }, 500); 235 } 236 change (){ 237 if(this.state.volume==0 || this.state.muted==1){ 238 this.state.volumeType='mute'; 239 } else if(this.state.volume<0.5){ 240 this.state.volumeType='low'; 241 } else { 242 this.state.volumeType='high'; 243 } 244 this.audio.volume = this.state.volume; 245 this.audio.muted = this.state.muted; 246 if(this.state.playing){ 247 (async () => { 248 if(this.vast.initialized==false){ 249 await this.vast.init(); 250 } 251 this.audio.play(); 252 })(); 253 } else { 254 this.audio.pause(); 255 } 256 257 this.player.setAttribute('data-playing-ads',this.state.playing_ads?1:0); 258 this.player.setAttribute('data-playing',this.state.playing?1:0); 259 this.player.setAttribute('data-muted',this.state.muted?1:0); 260 this.player.setAttribute('data-volume',this.state.volume); 261 this.player.setAttribute('data-volume-type',this.state.volumeType); 262 263 this.ctrl.volume.ctrl.value = this.audio.volume; 264 this.ctrl.volume.ctrl.style.backgroundSize = Math.round(this.audio.volume*100) + '% 100%'; 265 /* <b class="t" style="padding: .5em; font-size: 1.1em;">The morning Drive</b> */ 266 if(this.opts.timeinfos!=null&&this.opts.timeinfos!=''){ 267 this.ctrl.timeinfos.innerHTML=this.opts.timeinfos; 268 } 269 if(this.ctrl.time!=null&&this.state.currentTime>=0){ 270 this.ctrl.time.innerHTML=this.time(this.state.currentTime); 271 } 272 if(this.ctrl.duration!=null&&this.state.duration>0){ 273 this.ctrl.duration.innerHTML=this.time(this.state.duration); 274 } 275 if(this.ctrl.timeline!=null){ 276 this.ctrl.timeline.value = this.state.currentTime/this.state.duration; 277 this.ctrl.timeline.style.backgroundSize = Math.round(this.ctrl.timeline.value*100) + '% 100%'; 278 } 279 if(this.player.closest('.card-radio')!=null){ 280 if(this.state.playing){ 281 this.player.closest('.card-radio').classList.add('onplay'); 282 } else { 283 this.player.closest('.card-radio').classList.remove('onplay'); 284 } 285 } 286 if(this.player.closest('.radiotopic-media')!=null){ 287 if(this.state.playing){ 288 this.player.closest('.radiotopic-media').classList.add('onplay'); 289 } else { 290 this.player.closest('.radiotopic-media').classList.remove('onplay'); 291 } 292 } 293 document.dispatchEvent(new CustomEvent('minibplay-change')); 294 } 295 loadedmetadata (e){ 296 this.state.currentTime = Math.round(e.target.currentTime); 297 this.state.duration = Math.round(e.target.duration); 298 this.change(); 299 } 300 timeupdate (e){ 301 this.state.currentTime = Math.round(e.target.currentTime); 302 this.state.duration = Math.round(e.target.duration); 303 this.checkads(); 304 this.change(); 305 } 306 timeline (e){ 307 if(this.ctrl.timeline!=null){ 308 var x = Math.round(this.state.duration*e.target.value); 309 this.state.currentTime = x; 310 this.audio.currentTime = x; 311 this.change(); 312 } 313 } 314 gototimeline (s,play){ 315 var x = Math.round(s); 316 this.ctrl.timeline.value = Math.round(this.state.duration/x)/100; 317 this.state.currentTime = x; 318 this.audio.currentTime = x; 319 if(play){ this.play(); } 320 this.change(); 321 } 322 volume (e){ 323 this.state.volume = e.target.value; 324 if(this.state.muted==1 && this.state.volume > 0){ 325 this.state.muted=0; 326 } 327 this.change(); 328 } 329 mute (e){ 330 this.state.muted = (this.state.volume==0?0:!this.state.muted); 331 if(this.state.volume==0 && this.state.muted==0){ 332 this.state.volume = 0.5; 333 } 334 this.change(this); 335 } 336 toggleplay (){ 337 if(this.state.playing){ this.pause(); } else { this.play(); } 338 } 339 checkads (){ 340 if(this.ads.length>0){ 341 var this_duration = this.state.duration || 0; 342 var this_currentTime = this.state.currentTime || 0; 343 for(var ad in this.ads){ 344 if(this.ads[ad].audio.state!=null && this.ads[ad].audio.state=='ended'){ 345 this.ads[ad].state = 'ended'; 346 } 347 if(this.ads[ad].state!='ended'){ 348 this.ads[ad].start = 0; 349 switch (this.ads[ad].position){ 350 case 'midroll': this.ads[ad].start = Math.round(this_duration/2); break; 351 case 'postroll': this.ads[ad].start = this_duration; break; 352 } 353 this.ads[ad].end = this.ads[ad].start + this.ads[ad].duration; 354 if(this_currentTime >= this.ads[ad].start){ 355 if(this.state.playing){ 356 this.state.playing = false;
357 this.ads[ad].audio.play(); 358 this.state.playing_ads = true; 359 } 360 } 361 } 362 } 363 } 364 } 365 play (){ 366 document.querySelectorAll('.card-radio.onplay').forEach(a => { a.classList.remove('onplay'); }); 367 document.querySelectorAll('audio').forEach(a => { if(a.minibplay!=null){ 368 a.minibplay.state.playing = false; 369 a.minibplay.state.playing_ads = false; 370 a.minibplay.change(); 371 } else { a.pause(); } }); 372 this.state.playing = true; 373 this.checkads(); 374 this.change(); 375 /* document.dispatchEvent(new CustomEvent('minibplay-play')); */ 376 } 377 pause (){ 378 document.querySelectorAll('audio').forEach(a => { if(a.minibplay!=null){ 379 a.minibplay.state.playing = false; 380 a.minibplay.state.playing_ads = false; 381 a.minibplay.change(); 382 } else { a.pause(); } }); 383 this.state.playing = false; 384 this.state.playing_ads = false; 385 this.change(); 386 } 387 time (t){ 388 var t = new Date(t * 1000).toISOString().substr(11, 8); 389 return (parseInt(t.substr(0, 2))>0?t.substr(0, 2)+':':'') + t.substr(3, 2) + ':' + t.substr(6, 2); 390 } 391}; 392if(document.querySelectorAll('.radio-moments').length>0){ 393 var momentCurrenttime = 0; 394 document.addEventListener('minibplay-change',function(e){ 395 var t = document.querySelectorAll('.radiotopic-media .minibplay')[0].minibplay.state.currentTime; 396 if(momentCurrenttime!=t){ 397 momentCurrenttime = t; 398 var active_el = null; 399 document.querySelectorAll('[data-momentstime]').forEach(el => { 400 var t = parseInt(el.getAttribute('data-momentstime')); 401 if(t<=momentCurrenttime+3 ){ active_el = t; } 402 }); 403 if(active_el!=null){ 404 document.querySelectorAll('[data-momentstime]').forEach(el => { 405 var t = parseInt(el.getAttribute('data-momentstime')); 406 if(t==active_el){ el.classList.add('active') } else { el.classList.remove('active') } 407 }); 408 } 409 } 410 }); 411} 412document.dispatchEvent(new CustomEvent('minibplay-ready')); 413document.querySelectorAll('.wp-block-audio audio').forEach(audio => { 414 /* audio.setAttribute('vast-url','https://pubads.g.doubleclick.net/gampad/ads?iu=/21701724045/businessam/bamvastaudio&description_url=[placeholder]&tfcd=0&npa=0&ad_type=audio&sz=1x1&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&correlator=demo1&vpmute=0&vpa=click&vpos=preroll') */ 415 audio.minibplay = new minibplay({audio:audio}); 416});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.