add frog croak SFX: 11 croaks, plays on clicking/dragging frogs

+23

spec/lilymenu.svg

··· 1 + <?xml version="1.0" encoding="UTF-8" standalone="no"?> 2 + <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3 + <svg width="100%" height="100%" viewBox="0 0 107 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> 4 + <g transform="matrix(1,0,0,1,-169.669839,-715.344429)"> 5 + <g transform="matrix(1,0,0,1,-9167.949391,555.183116)"> 6 + <g transform="matrix(1,0,0,1,9160.949391,-551.370198)"> 7 + <g transform="matrix(1,-0,-0,1,176.669839,711.531512)"> 8 + <use xlink:href="#_Image1" x="0" y="40.71" width="101px" height="34px"/> 9 + </g> 10 + </g> 11 + <g transform="matrix(0.966949,0.254968,-0.254968,0.966949,9340.821923,-583.255046)"> 12 + <path d="M205.257,741.837C214.168,710.965 242.061,710.303 255.952,708.611C249.257,718.854 250.189,719.09 246.611,730.706C276.946,726.057 299.221,705.35 288.971,732.428C271.409,778.821 228.729,772.248 213.092,772.144C197.456,772.04 204.519,744.827 205.257,741.837Z" style="fill:rgb(61,179,29);"/> 13 + <g transform="matrix(0.966949,-0.254968,0.254968,0.966949,186.450738,719.662603)"> 14 + <use xlink:href="#_Image2" x="0.374" y="0" width="105px" height="70px"/> 15 + </g> 16 + </g> 17 + </g> 18 + </g> 19 + <defs> 20 + <image id="_Image1" width="101px" height="34px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAiCAYAAABGIRcbAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFcElEQVRoge3aa6xcVRUH8N998PbWgFrFYlEJc6AaIiAIUQKi4YAC8YsxEP0gMT6+EUEgiBESDWoiCUQlSoLxQ0lITIg0IBPEBxBQqQaw0cyJjSC2MQKmlHJbbu+DD+tMe3p6zsyZe+e2l977TyYzc/Zrnb32Wnut/94jrXYHvoBbcVjhM45NWZqcZQULRj7PcBXuwk7sKnzfn6XJNcTEwwTWVPQ1s6iSLk/sxiiOyT9dnNz9MZp/H1vTwdjiyLWscVzN8wta7c6JhFLGcVlNxenFkGqZ44ia5xP4MHvN6PSaiuOtdme0pmwFDVHYT+CVHlU/SyhlEj+uqXQy3jkUyVYAR+NzPcr/2mp3RkbFxvNbzFVUeitOWAThlisuxfk1Zf/Gs1mazHVd05PYWlP5kmFLtpxQcl2JvcFVGb/CcwoVXsYDNZXTVrszMgT5ljtW44s1ZTvxIyWlwE3ClZVxqvCFKxgQJSs5C2srqs3iBjyfpcku9lXKNrxU0WiVyPhXMAAKChnFibhFdd73On6WpcnrxQZd7MbvKhqN4bpWu3P8UKQ9xNFqd4oKuUTsFZtxZkX1V3Fl10K6GM3SpPj/iZqx3ofTFiTtMkDJXX0TD4qIq44ZeRYbSorcw3118XCPMav84Qrsp4wxXIDvNGh6I2ZKhrFfeJYJc6vC5StR2L4or3C8DT/A/Q2afzRLk0fLCiFXSqlgU00nZ+DqVrtzTE35skJJGYR1/ANf1ztanRLHJH+qq7Bn5RcGWY3/FssKmMNf8LUsTTb2FvvQQ4Ui4CjcgSvsS8VXYQO+h6eyNKlKP1Ca+MKgX8WdPTr/m1gRvyk+rDLFQwE1yjhWhLp34Lw+XcyJxHF9liZ9mfc6pUzgKUEL1GEjPibibBxaSqlRBJG3fRsXY12DrjbiM9hSfNhrrvZzUQVhzsFP1NP6xLHmesGdTfUbbCmjhxKIvfcoXInb89/9MIsfighrepB5qYymStnoekE310Ve03gRFwqmc/LNoJg+SiAOo3aLo4vvi9X+FvXzUMSk2MxvzdJk4CP12gEKQh+JX+LTffraZW9IvUG4v1ocSMU1UEAXp4go82LhIWbwLoOfKX0JPxfWMvC79tR64WU+iD9rZrZd/Br35O2ywnhV5zaVaPIyA0x4F+vE+/wP23PZpnGt2CvKCfUgmMKn8Ej3wXwWX19TzF96AtcIoeeDrXhGuIT78LggQN8reKEX5tlvE5wgOKZLxfWeCwtlc0IxO1Tf5mmK+wSZ+w3szNJkagF9NfKP8kz+kzgb31J/+N8U0/nYY3gNf8Rt+L3wx125+lnViLDew4W/nxOu5uO4XCRxZ+R1h33X4Dl8F49maZLlczQ6nz2kjMa0ST7oGkFBrxVKmjW8l50VYeMjaIlEbEpY1Gb8QazqM0WCO473i/OeI/D2IcrSDz8V5097jjqGuUcOzGW12p1xsfrmcBI+hOuHJtHSRgdfwTNZmmxbrEHmTTDmV49m87/rcBG+LFbumxWz+JeYl1/gI3gefxeW+W7B/m5fzOhxQaxvReQzgc+LBGtGhNNdF9fdHw420zyXyzCL/wtmdxceE67ztrzOjNirjhOsxbYsTRpHjgvBUCaopJxRsemuEu5tleCInhZK+oDg1k4ZxtgN8U8RTNwrIsFpcVlki9iLJrM0mTyA8vTE0FdtrqB+0dORIkpqiRO6c8Wq7GKHuPl/+AJk3CxOUu8W/NOOJo2WAhux6K6kYXLXzZjX4h3iBPQ9woffjE9UtPmP4OZeEEcNh4kobI2wgIeEW+qJpaCEMg6Kfx8wCz9a3A84R3BR5wsKY5PqpHMMI00o8qWKg73pVqJCaWP2pWhmD9SmezDwBvviZdR0FMG/AAAAAElFTkSuQmCC"/> 21 + <image id="_Image2" width="105px" height="70px" xlink:href="data:image/png;base64,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"/> 22 + </defs> 23 + </svg>

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092511]-1.wav

This is a binary file and will not be displayed.

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092511]-2.wav

This is a binary file and will not be displayed.

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092511]-3.wav

This is a binary file and will not be displayed.

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092511]-4.wav

This is a binary file and will not be displayed.

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092511]-5.wav

This is a binary file and will not be displayed.

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092511]-6.wav

This is a binary file and will not be displayed.

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092511].wav

This is a binary file and will not be displayed.

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092512]-1.wav

This is a binary file and will not be displayed.

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092512]-2.wav

This is a binary file and will not be displayed.

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092512]-3.wav

This is a binary file and will not be displayed.

spec/sfx/848549__drinkingwindgames__frog-croaking [2026-04-01 092512].wav

This is a binary file and will not be displayed.

+3 -1

src/lib/FrogHeader.svelte

··· 1 1 <script lang="ts"> 2 2 import LoginButton from './LoginButton.svelte'; 3 + import { playCroak } from './croak'; 3 4 4 5 let { onHomeClick }: { onHomeClick?: () => void } = $props(); 5 6 ··· 17 18 </div> 18 19 <div class="title-area"> 19 20 <a href="/" class="logo-link" onclick={handleClick}><h1 class="logo-text">vod frog</h1></a> 20 - <img src="/froggie.png" alt="A cute frog" class="header-frog" /> 21 +  22 + <img src="/froggie.png" alt="A cute frog" class="header-frog" onclick={playCroak} ontouchend={(e) => { e.preventDefault(); playCroak(); }} /> 21 23 </div> 22 24 <div class="subtitle-lines"> 23 25 <p class="subtitle">an exploration by</p>

+3 -1

src/lib/VideoPlayer.svelte

··· 2 2 import { onMount } from "svelte"; 3 3 import Hls from "hls.js"; 4 4 import WavyBorder from "./WavyBorder.svelte"; 5 + import { playCroak } from "./croak"; 5 6 6 7 // HLS video source URL (m3u8 playlist) 7 8 let { src }: { src: string } = $props(); ··· 197 198 function onFrogDown(e: MouseEvent | TouchEvent) { 198 199 e.preventDefault(); 199 200 e.stopPropagation(); 201 + playCroak(); 200 202 isScrubbing = true; 201 203 wasPlayingBeforeScrub = !!(videoEl && !videoEl.paused); 202 204 if (videoEl && wasPlayingBeforeScrub) videoEl.pause(); ··· 318 320 <button 319 321 class="fullscreen-btn" 320 322 class:visible={showControls || !playing} 321 - onclick={toggleFullscreen} 323 + onclick={() => { playCroak(); toggleFullscreen(); }} 322 324 title={isFullscreen ? "Exit fullscreen" : "Fullscreen"} 323 325 > 324 326 <img src="/frogeye.png" alt="fullscreen" class="frogeye" />

+15

src/lib/croak.ts

··· 1 + /** 2 + * Croak SFX — plays a random frog croak when called. 3 + * Pre-loads all 11 croak mp3s and picks one at random each time. 4 + */ 5 + 6 + const CROAK_COUNT = 11; 7 + const croakPaths = Array.from({ length: CROAK_COUNT }, (_, i) => `/sfx/croak${i + 1}.mp3`); 8 + 9 + /** Play a random croak sound effect. Volume is kept moderate so it's fun, not startling. */ 10 + export function playCroak() { 11 + const idx = Math.floor(Math.random() * CROAK_COUNT); 12 + const audio = new Audio(croakPaths[idx]); 13 + audio.volume = 0.4; 14 + audio.play().catch(() => {}); 15 + }

static/sfx/croak1.mp3

This is a binary file and will not be displayed.

static/sfx/croak10.mp3

This is a binary file and will not be displayed.

static/sfx/croak11.mp3

This is a binary file and will not be displayed.

static/sfx/croak2.mp3

This is a binary file and will not be displayed.

static/sfx/croak3.mp3

This is a binary file and will not be displayed.

static/sfx/croak4.mp3

This is a binary file and will not be displayed.

static/sfx/croak5.mp3

This is a binary file and will not be displayed.

static/sfx/croak6.mp3

This is a binary file and will not be displayed.

static/sfx/croak7.mp3

This is a binary file and will not be displayed.

static/sfx/croak8.mp3

This is a binary file and will not be displayed.

static/sfx/croak9.mp3

This is a binary file and will not be displayed.

Configure Feed

Configure Feed