fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make YouTube lofi player autoplay on entering the rain page

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 05:44:12 +02:00
parent 845d72136d
commit d8a8254916
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SubpageRain.astro
+3 -2
View File
@@ -8,6 +8,7 @@ window.rainData = function() {
wind: 0, wind: 0,
lofiFilter: 800, lofiFilter: 800,
musicVolume: 30, musicVolume: 30,
lofiSrc: '',
drops: [], drops: [],
audioCtx: null, audioCtx: null,
noiseNode: null, noiseNode: null,
@@ -103,7 +104,7 @@ window.rainData = function() {
<!-- Subpage: Rain Detail --> <!-- Subpage: Rain Detail -->
<div x-show="currentPage === 'page-rain'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950 relative overflow-hidden" <div x-show="currentPage === 'page-rain'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950 relative overflow-hidden"
x-data="window.rainData()" x-data="window.rainData()"
x-init="generateDrops(rainIntensity); $watch('rainIntensity', value => { generateDrops(value); updateAudio() }); $watch('lofiFilter', value => updateAudio()); $watch('currentPage', val => { if(val === 'page-rain') initAudio(); })"> x-init="generateDrops(rainIntensity); $watch('rainIntensity', value => { generateDrops(value); updateAudio() }); $watch('lofiFilter', value => updateAudio()); $watch('currentPage', val => { if(val === 'page-rain') { initAudio(); lofiSrc = 'https://www.youtube.com/embed/jfKfPfyJRdk?autoplay=1'; } else { lofiSrc = ''; } })">
<!-- Rain Container (Full Screen on this page) --> <!-- Rain Container (Full Screen on this page) -->
<div class="absolute inset-0 pointer-events-none z-0"> <div class="absolute inset-0 pointer-events-none z-0">
@@ -163,7 +164,7 @@ window.rainData = function() {
<span class="text-xs text-stone-400">Lofi Hip Hop Groove (YouTube Stream)</span> <span class="text-xs text-stone-400">Lofi Hip Hop Groove (YouTube Stream)</span>
</div> </div>
<div class="rounded-lg overflow-hidden border border-stone-800"> <div class="rounded-lg overflow-hidden border border-stone-800">
<iframe width="100%" height="80" src="https://www.youtube.com/embed/jfKfPfyJRdk" title="Lofi Hip Hop" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <iframe width="100%" height="80" :src="lofiSrc" title="Lofi Hip Hop" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div> </div>
</div> </div>