Using relative URLs to refer to audio/video/font files

[wbamberg]

In mdn/content#14183 I want to include a live sample using an <audio> element. With, <img> elements I can download the source, keep it alongside index.md, and reference it using a relative path, like this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#alternative_text.

I don't seem to be able to do the same with audio files (and maybe video too, haven't tried these). I need to refer to them using an absolute URL, like https://pr14183.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLMediaElement/preservespitch#example . This doesn't seem ideal - it would be good to keep all the assets for a page together.

[wbamberg]

I think the same applies to .ttf, which is forcing us to use a GitHub Pages-hosted example for https://developer.mozilla.org/en-US/docs/web/css/@font-face#specifying_a_downloadable_font .

I might be wrong here though.

[caugner]

The magic for images (img[src]) is happening here:

yari/build/index.js

Lines 462 to 463 in 68d8fa1

	// Check and scrutinize any local image references
	const fileAttachments = checkImageReferences(doc, $, options, document);

yari/build/check-images.js

Lines 35 to 39 in 68d8fa1

	const matches = [
	...findMatchesInText(src, rawContent, {
	attribute: "src",
	}),
	];

The same approach should work for audio[src], but it will be slightly trickier to extract fonts as well.

[hamishwillee]

Yes. Also font files like woff and woff2. Can we get these supported too @caugner ?

[caugner]

Yes. Also font files like woff and woff2.

That will definitely be trickier, because you wouldn't be referencing those fonts in an HTML attribute, but rather inline in JavaScript or in a <style> tag. 🤔

@hamishwillee Would those woff/woff2 files be used in multiple examples?

[hamishwillee]

@caugner Yes. For my case I'll be accessing them programmatically using FontFace - that means it's a fetch under the hood, which is why I need this same-site.
But yes, also handy in styles via @font-face.

@hamishwillee Would those woff/woff2 files be used in multiple examples?

Yes. At least the FontFace and @font-face examples.

There are some alternatives that might be used.

• Work out how to serve this kind of file from Google Fonts. I have not succeeded with this.
• Our own CDN for serving these files.

But having these locally is the most flexible solution, and means we won't have to hassle you again.