https://poetskis.com/pages/html
I added the code you recommended thank you! However, the page isn't showing still? Any ideas?
Here's the most recent code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poem Animation</title>
<style>
/* Change the CSS of body and poem */
body {
font-family: Arial, sans-serif;
}
#poem {
white-space: pre-line;
text-align: left;
color: white;
background-color: black;
}
.line {
opacity: 0;
transition: opacity 1s;
}
.visible {
opacity: 1;
}
</style>
</head>
<body>
<!-- Removed autoplay due to modern browser policies; autoplay with sound is generally blocked unless certain conditions are met (e.g., user interaction or site-specific permissions). -->
<audio id="audio">
<source src="{{ 'come run savage.mp3' | asset_url }}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="poem">
<div class="line" id="line1">come</div>
<div class="line" id="line2">run</div>
<div class="line" id="line3">savage</div>
<div class="line" id="line4">with me</div>
<div class="line" id="line5">over the</div>
<div class="line" id="line6">hills and far</div>
<div class="line" id="line7">away off piste</div>
<div class="line" id="line8">where the blue mountains</div>
<div class="line" id="line9">eternally are walking</div>
<div class="line" id="line10">and there be dragons</div>
<div class="line" id="line11">i.e. the unknown</div>
<div class="line" id="line12">or is it some psychedelic</div>
<div class="line" id="line13">mosquitoes that sound</div>
<div class="line" id="line14">like helicopters</div>
<div class="line" id="line15">apocalyptic victory</div>
<div class="line" id="line16">piercing the</div>
<div class="line" id="line17">cellular membrane</div>
<div class="line" id="line18">our mitochondrial walls</div>
<div class="line" id="line19">or was it more a mycelial</div>
<div class="line" id="line20">consciousness moment</div>
<div class="line" id="line21">merging with cosmic</div>
<div class="line" id="line22">mist in the midst</div>
<div class="line" id="line23">of poetic nebulousness</div>
<div class="line" id="line24">mixed with some wild ass</div>
<div class="line" id="line25">west coast hippy **bleep**</div>
<div class="line" id="line26">Shaken\stirred and just</div>
<div class="line" id="line27">a little disturbed</div>
<div class="line" id="line28">on some</div>
<div class="line" id="line29">psilcybic</div>
<div class="line" id="line30">trip through</div>
<div class="line" id="line31">rhythmic</div>
<div class="line" id="line32">syllabic mumbles</div>
<div class="line" id="line33">channeling restless</div>
<div class="line" id="line34">ancestors</div>
<div class="line" id="line35">otherworldly</div>
<div class="line" id="line36">be’serkers kindling</div>
<div class="line" id="line37">deep flow</div>
<div class="line" id="line38">in deep</div>
<div class="line" id="line39">snow</div>
<div class="line" id="line40"></div>
<div class="line" id="line41">co-</div>
<div class="line" id="line42">me</div>
<div class="line" id="line43">surf</div>
<div class="line" id="line44">inthe</div>
<div class="line" id="line45">quantum</div>
<div class="line" id="line46">flux lucid</div>
<div class="line" id="line47">dreaming</div>
<div class="line" id="line48">freeing our</div>
<div class="line" id="line49">beings from</div>
<div class="line" id="line50">confines of</div>
<div class="line" id="line51">our minds</div>
<div class="line" id="line52">breathe and</div>
<div class="line" id="line53">release</div>
<div class="line" id="line54">unleash</div>
<div class="line" id="line55">the fun</div>
<div class="line" id="line56">loving</div>
<div class="line" id="line57">peace</div>
<div class="line" id="line58">push-</div>
<div class="line" id="line59">ing</div>
<div class="line" id="line60">off</div>
<div class="line" id="line61">piste</div>
<div class="line" id="line62">irrev-</div>
<div class="line" id="line63">erent</div>
<div class="line" id="line64">powder</div>
<div class="line" id="line65">priest</div>
<div class="line" id="line66">skiing trees</div>
<div class="line" id="line67">to be freed</div>
<div class="line" id="line68">by gravity</div>
<div class="line" id="line69">by the way</div>
<div class="line" id="line70">what was in</div>
<div class="line" id="line71">that so-called</div>
<div class="line" id="line72">Kootenay</div>
<div class="line" id="line73">cookie</div>
<div class="line" id="line74">you gave</div>
<div class="line" id="line75">me to</div>
<div class="line" id="line76">unen-</div>
<div class="line" id="line77">slave</div>
<div class="line" id="line78">me</div>
<div class="line" id="line79">and</div>
<div class="line" id="line80">howl</div>
<div class="line" id="line81">a beat</div>
<div class="line" id="line82">repeat</div>
<div class="line" id="line83">for i too</div>
<div class="line" id="line84">have seen</div>
<div class="line" id="line85">the best</div>
<div class="line" id="line86">minds of my</div>
<div class="line" id="line87">generation</div>
<div class="line" id="line88">wasted</div>
<div class="line" id="line89">in pure</div>
<div class="line" id="line90">white</div>
<div class="line" id="line91">powder</div>
<div class="line" id="line92">snow</div>
<div class="line" id="line93">addict-</div>
<div class="line" id="line94">ed to</div>
<div class="line" id="line95">flow</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const audio = document.getElementById('audio');
const poemLines = [
{ id: 'line1', time: 0 },
{ id: 'line2', time: 2 },
{ id: 'line3', time: 4 },
{ id: 'line4', time: 6 },
{ id: 'line5', time: 8 },
{ id: 'line6', time: 10 },
{ id: 'line7', time: 12 },
{ id: 'line8', time: 14 },
{ id: 'line9', time: 16 },
{ id:Sure, here is the complete and corrected Liquid template with the recommended changes:
```liquid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poem Animation</title>
<style>
body {
font-family: Arial, sans-serif;
}
#poem {
white-space: pre-line;
text-align: left;
color: white;
background-color: black;
}
.line {
opacity: 0;
transition: opacity 1s;
}
.visible {
opacity: 1;
}
</style>
</head>
<body>
<audio id="audio">
<source src="{{ 'come run savage.mp3' | asset_url }}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="poem">
<div class="line" id="line1">come</div>
<div class="line" id="line2">run</div>
<div class="line" id="line3">savage</div>
<div class="line" id="line4">with me</div>
<div class="line" id="line5">over the</div>
<div class="line" id="line6">hills and far</div>
<div class="line" id="line7">away off piste</div>
<div class="line" id="line8">where the blue mountains</div>
<div class="
time: 6 },
{ id: 'line5', time: 8 },
{ id: 'line6', time: 10 },
{ id: 'line7', time: 12 },
{ id: 'line8', time: 14 },
{ id: 'line9', time: 16 },
{ id: 'line10', time: 18 },
{ id: 'line11', time: 20 },
{ id: 'line12', time: 22 },
{ id: 'line13', time: 24 },
{ id: 'line14', time: 26 },
{ id: 'line15', time: 28 },
{ id: 'line16', time: 30 },
{ id: 'line17', time: 32 },
{ id: 'line18', time: 34 },
{ id: 'line19', time: 36 },
{ id: 'line20', time: 38 },
{ id: 'line21', time: 40 },
{ id: 'line22', time: 42 },
{ id: 'line23', time: 44 },
{ id: 'line24', time: 46 },
{ id: 'line25', time: 48 },
{ id: 'line26', time: 50 },
{ id: 'line27', time: 52 },
{ id: 'line28', time: 54 },
{ id: 'line29', time: 56 },
{ id: 'line30', time: 58 },
{ id: 'line31', time: 60 },
{ id: 'line32', time: 62 },
{ id: 'line33', time: 64 },
{ id: 'line34', time: 66 },
{ id: 'line35', time: 68 },
{ id: 'line36', time: 70 },
{ id: 'line37', time: 72 },
{ id: 'line38', time: 74 },
{ id: 'line39', time: 76 },
{ id: 'line40', time: 78 },
{ id: 'line41', time: 80 },
{ id: 'line42', time: 82 },
{ id: 'line43', time: 84 },
{ id: 'line44', time: 86 },
{ id: 'line45', time: 88 },
{ id: 'line46', time: 90 },
{ id: 'line47', time: 92 },
{ id: 'line48', time: 94 },
{ id: 'line49', time: 96 },
{ id: 'line50', time: 98 },
{ id: 'line51', time: 100 },
{ id: 'line52', time: 102 },
{ id: 'line53', time: 104 },
{ id: 'line54', time: 106 },
{ id: 'line55', time: 108 },
{ id: 'line56', time: 110 },
{ id: 'line57', time: 112 },
{ id: 'line58', time: 114 },
{ id: 'line59', time: 116 },
{ id: 'line60', time: 118 },
{ id: 'line61', time: 120 },
{ id: 'line62', time: 122 },
{ id: 'line63', time: 124 },
{ id: 'line64', time: 126 },
{ id: 'line65', time: 128 },
{ id: 'line66', time: 130 },
{ id: 'line67', time: 132 },
{ id: 'line68', time: 134 },
{ id: 'line69', time: 136 },
{ id: 'line70', time: 138 },
{ id: 'line71', time: 140 },
{ id: 'line72', time: 142 },
{ id: 'line73', time: 144 },
{ id: 'line74', time: 146 },
{ id: 'line75', time: 148 },
{ id: 'line76', time: 150 },
{ id: 'line77', time: 152 },
{ id: 'line78', time: 154 },
{ id: 'line79', time: 156 },
{ id: 'line80', time: 158 },
{ id: 'line81', time: 160 },
{ id: 'line82', time: 162 },
{ id: 'line83', time: 164 },
{ id: 'line84', time: 166 },
{ id: 'line85', time: 168 },
{ id: 'line86', time: 170 },
{ id: 'line87', time: 172 },
{ id: 'line88', time: 174 },
{ id: 'line89', time: 176 },
{ id: 'line90', time: 178 },
{ id: 'line91', time: 180 },
{ id: 'line92', time: 182 },
{ id: 'line93', time: 184 },
{ id: 'line94', time: 186 },
{ id: 'line95', time: 188 }
];
audio.addEventListener('timeupdate', function() {
const currentTime = audio.currentTime;
poemLines.forEach(function(line) {
const element = document.getElementById(line.id);
if (currentTime >= line.time) {
element.classList.add('visible');
} else {
element.classList.remove('visible');
}
});
});
});
</script>
</body>
</html>
.
