add cover image for audio on the player page

[mayeaux]

You could also drop the audio.svg file above it, will fix the issue of the speed selector being inaccesible to audio files

[BassOfBass]

Or just go hacky way and use <video> for audio instead. <video> tag has poster attribute and can accept audio <source> as a child element.

[mayeaux]

Not a bad idea at all. Are there any downsides to that you can think of?

[BassOfBass]

Depends on what range of browsers you are targeting, so there are probably going to be problems with Safari and IE.

[Borewit]

Would music-metadata be useful to extract covers from audio files? It can be used to get the duration as well.

[mayeaux]

Depends on what range of browsers you are targeting, so there are probably going to be problems with Safari and IE.

That's fine, it's probably the cleanest/nicest solution so I'd support it even if for some browsers it doesn't work. Is there a caniuse link I can check to see the browser support?

[BassOfBass]

@mayeaux there is MDN article.
Although after thinking about it I'd advice against going that way and instead use plain old wrappers.
Something like this:

div.audioplayer
  div.picturewrapper
    a(href="")
      picture
        img(srcset="", src="", width="", height="", alt="")
  div.audiowrapper
    //- `<audio> doesn't support subtitles`
    video(controls)
      each source of sources
        source(src="", type="audio/*")
      each track of tracks
        track(kind="", label="", src="")
      p Your browser doesn't support HTML5 media. Here is a #[a(href="") link to the audio] instead.
  div.audiocontrols
  div.transcription

Will require some changes to the model for full support.

[BassOfBass]

Since media.pug is a gargantuan mess, I've opted for small changes: #395
@mayeaux could you write a file in docs folder explaining which files the upload info goes through from hitting upload button up to landing in the media.pug template? IMO having a single template for video/audio/pictures was a mistake, way too many conditionals and path concatenations to keep track of.