code: A_SOUND_CLIP - an audio message mock up

[10billionghosts]

A_Sound_Clip.wav(700 MB)

-:-- / -:--

▶︎

[flavor text description of background sound]

``Gummi bears candy canes jujubes caramels tootsie roll muffin pastry tiramisu brownie.

Ice cream chocolate jujubes icing gingerbread sesame snaps. Cake marshmallow biscuit apple pie gummi bears. Powder caramels bonbon soufflé bonbon cookie chocolate cake.

Ice cream gummies marzipan biscuit powder. ``

code

Hello! I'm on a roll, somehow! Probably because I have a major work deadline coming up that I really should be focusing on instead :)))))))))). Say hello to A_SOUND_CLIP!

This voice message mock up opens up when you press the play button to show a hidden "audio transcription" section. Finally, your internet writing barbies can live the dream of deeply regretted late night IC drunk posts. I've also included alternate styling so that you can also easily use it as a playlist. I've included a preview for that styling at the bottom of the post.

MAIN CODE HERE:
<lj-raw> <div style="max-width:400px;width:100%;min-height:100px;margin:0 auto;display:grid;grid-template-columns:100px 1fr;grid-template-rows:1fr;font-family:helvetica, verdana, sans serif;font-size:12px;line-height:1.5;border-radius:10px;border:1px solid rgba(28, 22, 38,.75);background:#563b7d url('BG_URL');color:#fff;"> <!-- TIMER AREA; --> <div style="grid-column-start:2;grid-row-start:1;width:95%;height:75px;margin:15px 15px 10px 0;display:grid;grid-template-rows:30px 10px 35px;gap:0;border-radius:10px;background: rgba(44, 30, 64,.5);"> <!-- [file name, title or name of the 'sound clip'] --> <div style="grid-row-start:1;grid-row-end:2;padding:2px 5px 0 10px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:end;gap:5px;letter-spacing:1.3;"> <b>!!TITLE TEXT!!</b>(#.# MB) </div> <!-- [file name, end] --> <!-- [timer bar] --> <div style="grid-row-start:2;grid-row-end:3;display:flex;flex-wrap:wrap;justify-content:start;align-items:end;padding:2px 5px 0 10px;"><div style="width:99%;height:7px;border-radius:5px;background: rgba(28, 22, 38,.75);"> <!-- //change the 'width' value here to adjust how much of the sound has "played"// --> <div style="width:5%;height:7px;border-radius:5px;background:#6d3fb0;"></div> </div></div> <!-- [timer bar, end] --> <!-- [time, change the number values for comedy] --> <div style="grid-row-start:3;grid-row-end:4;padding:2px 5px 0 10px;">-:-- / -:--</div> <!-- [time, end] --> </div> <!-- TIMER BAR & FILE NAME; --> <!-- DETAILS; this section will contain your text; see below --> <details style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;justify-content:center;align-items:center;"> <! -- [play button] --> <summary style="width:75px;height:75px;margin:15px 0 15px 15px;display:flex;justify-content:center;align-items:center;border-radius:50%;text-align:center;text-indent:10px;font-size:52px;background: rgba(44, 30, 64,.5);color:#6d3fb0">▶︎</summary> <!-- [play button, end] --> <!-- [transposed text] --> <div style="max-width:400px;width:100%;margin:0 0 20px 0;padding:5px 0;background: rgba(44, 30, 64,.5);"> <div style="margin:10px;font-size:11px;font-style:italic;"> [flavor text description of background sound] </div> <div style="width:90%;margin:5px auto 10px;"> </lj-raw>``Your content here!!``<lj-raw> </div></div></details></div> <!-- CREDIT --> <div style="max-width:400px;width:100%;margin:0 auto;text-align:right;font-size:10px;color:#ccc"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- CREDIT --> </lj-raw>

PLAYLIST VARIANT CODE:
<lj-raw> <div style="max-width:400px;width:100%;min-height:100px;margin:0 auto;display:grid;grid-template-columns:100px 1fr;grid-template-rows:1fr;font-family:helvetica, verdana, sans serif;font-size:12px;line-height:1.5;border-radius:10px;border:1px solid rgba(28, 22, 38,.75);background:#563b7d url('BG_URL');color:#fff;"> <!-- TIMER AREA; --> <div style="grid-column-start:2;grid-row-start:1;width:95%;height:75px;margin:15px 15px 10px 0;display:grid;grid-template-rows:30px 10px 35px;gap:0;border-radius:10px;background: rgba(44, 30, 64,.5);"> <!-- [file name, title or name of the 'sound clip'] --> <div style="grid-row-start:1;grid-row-end:2;padding:2px 5px 0 10px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:end;gap:5px;letter-spacing:1.3;"> <b>!!TITLE TEXT!!</b>(#.# MB) </div> <!-- [file name, end] --> <!-- [timer bar] --> <div style="grid-row-start:2;grid-row-end:3;display:flex;flex-wrap:wrap;justify-content:start;align-items:end;padding:2px 5px 0 10px;"><div style="width:99%;height:7px;border-radius:5px;background: rgba(28, 22, 38,.75);"> <!-- //change the 'width' value here to adjust how much of the sound has "played"// --> <div style="width:5%;height:7px;border-radius:5px;background:#6d3fb0;"></div> </div></div> <!-- [timer bar, end] --> <!-- [time, change the number values for comedy] --> <div style="grid-row-start:3;grid-row-end:4;padding:2px 5px 0 10px;">-:-- / -:--</div> <!-- [time, end] --> </div> <!-- TIMER BAR & FILE NAME; --> <!-- DETAILS; this section will contain your text; see below --> <details style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3;justify-content:center;align-items:center;"> <! -- [play button] --> <summary style="width:75px;height:75px;margin:15px 0 15px 15px;display:flex;justify-content:center;align-items:center;border-radius:50%;text-align:center;text-indent:10px;font-size:52px;background: rgba(44, 30, 64,.5);color:#6d3fb0">▶︎</summary> <!-- [play button, end] --> <!-- [transposed text] --> <div style="max-width:400px;width:100%;margin:0 0 20px 0;padding:5px 0;background: rgba(44, 30, 64,.5);"> <div style="width:90%;margin:5px auto 10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;"> <div style="width:100%;padding:7px 7px 5px;text-align:left;"><b>SONG TITLE</b> ○ <i>Artist Name</i></div> <div style="width:90%;margin:0 auto;padding-bottom:7px;text-align:center;font-size:10px;"></lj-raw>song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics <lj-raw></div> <div style="width:100%;padding:7px 7px 5px;text-align:left;"><b>SONG TITLE</b> ○ <i>Artist Name</i></div> <div style="width:90%;margin:0 auto;padding-bottom:7px;text-align:center;font-size:10px;"></lj-raw>song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics <lj-raw></div> <div style="width:100%;padding:7px 7px 5px;text-align:left;"><b>SONG TITLE</b> ○ <i>Artist Name</i></div> <div style="width:90%;margin:0 auto;padding-bottom:7px;text-align:center;font-size:10px;"></lj-raw>song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics <lj-raw></div> <a href="#URL_HERE" style="min-width:30%;margin-top:8px;text-decoration:none;text-align:center;padding:7px;border-radius:10px;background:#6d3fb0;color:#fff;">listen</a> </div></div></details></div> <!-- CREDIT --> <div style="max-width:400px;width:100%;margin:0 auto;text-align:right;font-size:10px;color:#ccc"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- CREDIT --> </lj-raw>

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly!

❣️ You can totally post multiple of these in one post, one after the other. It's not in a flex grid, so they'll automatically just be one per line.

❣️ Don't forget to change things like the !!TITLE TEXT!! under the [file name] subsection, and the time values under the [time] subsection.

❣️ This code has ONE instance of BG_URL. You can leave this placeholder text intact if you'd like the code to just be a solid color. Otherwise, replace it with the URL for an appropriate background image. It looks best with seamless repeating backgrounds.

❣️ The playlist version of the code comes with one instance of #URL_HERE. Use this to optionally link to a full playlist elsewhere, or delete the entire link if you don't need it!

❣️ To change the length of the inner timer bar change the 'width:5%' value found under the [play bar] sub-section. It's commented out in the code so that it's easier to find.

❣️ For the playlist version of the code:

• You can add more songs/lyric sections by copy pasting them.


• You can completely remove the lyric sections by deleting their entire div.


• Don't forget to either update the 'listen' link or delete it if you don't need it!

❣️ There are a lot more colors than I'd usually put into a code to account for here. Here's a list of 'em for customization purposes:

• hex code #563b7d: default background color, declared at top of code


• rgba(28, 22, 38,.75): outer border & background of timer bar


• rgba(44, 30, 64,.5): background for play button, timer area, and hidden text background


• hex code #6d3fb0: time played & play button


• hex code #fff (white) is the default text color

❣️ 'rgba' is simply a different way of inputting colors that allows you to adjust color opacity. You can get the rgb value of a color from most online color pickers. The first three numbers in rgba(r,g,b,a) control the color, while the 'a' value controls the transparency (1 = fully opaque, .5 = half transparency, 0 = fully transparent).

❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :)

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi.

!!TITLE TEXT!!(#.# MB)

-:-- / -:--

▶︎

SONG TITLE ○ Artist Name

song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics

SONG TITLE ○ Artist Name

song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics

SONG TITLE ○ Artist Name

song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics song lyrics

listen

code