#Starlight + Audio play by pressing a button

34 messages · Page 1 of 1 (latest)

grand dragon
#

Hi @jagged blade 👋

  1. You can use Starlight’s “component overrides” to completely customize different parts of the UI, e.g. to add your audio playback system
  2. You can add tables using standard Markdown syntax (or write HTML directly if you need more control)
jagged blade
#

sorry for some dumb questions lol, I am really new to coding.. do you know how to add a button here so I can play audio..?

image.png
grand dragon
jagged blade
#

I have a massive audio files, so storing in locally probably going to slow my website down, I am still searching for the 3rd party

grand dragon
#

Aha. Yes, that’s probably the first thing to work out. Then once you have a URL for wherever the audio is stored, using the <audio> element should be reasonably easy.

jagged blade
#

it seems the default html audio play is not really suitable, because it's impossible to get rid of 3 dotsI wasn't able to find on on stackflow) , I want to creat a simple audio play button, only play and stop, do you know how to make one?

#

I got rid of 3 dot but this

image.png
#

audio {
width: 110px;
animation: audioWidth 0.1s forwards;
}

auto::-webkit-media-controls-panel {
justify-content: center;
}

audio::-webkit-media-controls-volume-slider {
display: none !important;
min-width: 0;
}

audio::-webkit-media-controls-timeline-container {
display: none !important;
min-width: 0;
}

audio::-webkit-media-controls-time-remaining-display {
display: none !important;
min-width: 0;
}

audio::-webkit-media-controls-timeline {
display: none !important;
min-width: 0;
}

@keyframes audioWidth {
from {
width: 110px;
}
to {
width: 84px;
}
}

grand dragon
#

There are probably a lot of options here, but I suspect they all involve building your own UI.

#

I quickly tried the media-chrome library from Mux and it seemed to work pretty well.

#

In this example the <AudioButton /> component renders some custom elements powered by the media-chrome library to only render the play button.

#

Then in the src/content/docs/index.mdx I have imported that component and used it.

#

Will need to use .mdx for this instead of .md

#

Does come with a performance cost — adding Mux’s custom elements adds about 60 kB of JavaScript to the page in exchange for being quick and easy. The alternative would be writing some JS yourself, which could probably be much smaller.

jagged blade
#

I've recreated the project , it works at first, but for some reason it won't work and can't locate the file...

grand dragon
#

Ah, it probably depends how deep the content file is nested. The ../ in the import path means “go up one level in the folder hierarchy”, so needs adapting for each folder depth.

#

Might be easiest for you to import like this instead:

import AudioButton from '/src/components/AudioButton.astro';
#

That will avoid needing to adapt the path depending on which file you are in

jagged blade
#

it works! I LOVE YOU

jagged blade
#

I was going to ask how to set up a filter and I some how did it. lol

#

I can help translate docs to Traditional Chinese if you guys want me to.

jagged blade
#

when I do <span data-pagefind-filter="category">Tagalog Words</span></div>

it will show up in the content

grand dragon
# 
<span data-pagefind-filter="category:Tagalog Words" />
grand dragon
jagged blade
#

how to override the default header to a custom header or can I just create an astro page?