{ if (!this.player) return; this.time = this.player.currentTime; if (!this.player.paused) { setTimeout(updateTimeFn, this.interval); } }; setTimeout(updateTimeFn, this.interval); gtag('event', 'audio_start', { 'audio_title': '68.ゲスト編27「3人目の参加アーティストが決定！\"百草 in 木曽谷 専門領域交差型アーティストインレジデンス\"」', 'audio_url': 'https://listen.style/p/hitokoto_radio/3najnqnv', 'audio_current_time': this.time }); }); this.player.addEventListener('timeupdate', () => { this.updateProgressBar(); if (this.hasPlayed && Math.floor(this.time / 30) != Math.floor(this.lastPosition / 30)) { this.updatePosition(); } // 95%以上再生で完了リクエスト送信 if (this.player.duration > 0 && this.time > (this.player.duration * 0.95) && !this.completedSent) { this.completedSent = true; this.updatePosition(); } // 巻き戻しリセット if (this.player.duration > 0 && this.time < (this.player.duration * 0.9)) { this.completedSent = false; } }); this.player.addEventListener('pause', () => { this.playing = false; if (this.hasPlayed) { this.updatePosition(); } }); window.addEventListener('beforeunload', () => { if (this.player && !this.player.paused) this.updatePosition(); }); this.player.addEventListener('ratechange', () => { this.updatePlaybackRate(); }); this.player.addEventListener('loadeddata', () => { if (this._loadeddataTriggered) return; this._loadeddataTriggered = true; this.player.currentTime = this.time; this.lastPosition = this.time; this.player.playbackRate = this.speed; }, { once: true }); }, playEpisode(start) { // console.log('play', this.time); if ((start <= this.player.currentTime) && (this.player.currentTime <= (start + 5))) { if (this.player.paused) { this.player.play(); } return; } this.time = start; this.player.currentTime = this.time; this.player.play(); // console.log(this.time); }, togglePlay() { this.player.paused ? this.player.play() : this.player.pause(); }, updatePosition() { this.lastPosition = this.time; fetch('https://listen.style/p/01jnwe9zkjfz4t44ca6nf25mea/01k8fsgrc3ajxpnhr0nby42wjd/update_position', { method: 'POST', body: JSON.stringify({ time: this.time }), headers: { 'Content-Type': 'application/json','X-CSRF-TOKEN': 'By2ybBQ200LwibTdSUjMWtzTRDEYdiV614igQ0k4'} }); }, updatePlaybackRate() { fetch('https://listen.style/update_playback_rate', { method: 'POST', body: JSON.stringify({ rate: this.player.playbackRate }), headers: { 'Content-Type': 'application/json','X-CSRF-TOKEN': 'By2ybBQ200LwibTdSUjMWtzTRDEYdiV614igQ0k4'} }); }, updateTime(t) { if (t < 0) { t = 0; } else if (this.player.duration < t) { t = Math.max(this.player.duration - 3, 0); } this.time = t; this.player.currentTime = t; this.updateProgressBar(); }, updateProgressBar(percent) { if (!percent) { percent = this.time * 100 / this.player.duration; } this.progressBar.style.width = percent + '%'; this.progressBar.parentElement.setAttribute('aria-valuenow', Math.floor(percent)); }, setupKeyboardShortcuts() { document.addEventListener('keydown', (event) => { const playerElement = document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' || document.activeElement.isContentEditable; if (playerElement) return; // Ignore key events when input or textarea is focused const shiftNotAllowedShortcuts = ['Space', 'KeyK', 'KeyM', 'ArrowLeft', 'ArrowRight', 'KeyJ', 'KeyL', 'KeyS', 'ArrowUp', 'ArrowDown']; if (shiftNotAllowedShortcuts.includes(event.code) && event.shiftKey) { // If shift is pressed and the shortcut should not allow shift, return return; } switch (event.code) { case 'Space': case 'KeyK': event.preventDefault(); this.togglePlay(); break; case 'KeyM': event.preventDefault(); this.player.muted = !this.player.muted; break; case 'ArrowLeft': event.preventDefault(); this.updateTime(this.time - 5); break; case 'ArrowRight': event.preventDefault(); this.updateTime(this.time + 5); break; case 'KeyJ': event.preventDefault(); this.updateTime(this.time - 10); break; case 'KeyL': event.preventDefault(); this.updateTime(this.time + 10); break; case 'KeyS': event.preventDefault(); this.addStar(); break; case 'Period': // > event.preventDefault(); if (event.shiftKey) { this.speed = Math.min(Math.max(parseFloat(this.speed) + 0.1, 0.5), 4.0); this.speed = parseFloat(this.speed); this.player.playbackRate = this.speed; } break; case 'Comma': // < event.preventDefault(); if (event.shiftKey) { this.speed = Math.min(Math.max(parseFloat(this.speed) - 0.1, 0.5), 4.0); this.speed = parseFloat(this.speed); this.player.playbackRate = this.speed; } break; case 'ArrowUp': event.preventDefault(); this.changeVolume(parseFloat(this.volume) + 0.05); break; case 'ArrowDown': event.preventDefault(); this.changeVolume(parseFloat(this.volume) - 0.05); break; default: break; } }); }, changeVolume(volume) { if (this.player && (volume >= 0 && volume <= 1)) { this.volume = volume; this.player.volume = this.volume; } } }" x-init=" window.addEventListener('notify', event => { showNotification(event.detail.message); }); window.addEventListener('replace-text', event => { replaceText(event.detail.searchString, event.detail.replacementString); }); const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); if (mediaQuery.matches) { document.documentElement.classList.add('dark'); } setupKeyboardShortcuts(); ">