Skip to content

Instantly share code, notes, and snippets.

Last active December 21, 2015 13:38
What would you like to do?


An h-media card describes a single media stream or multiple media streams.

<p>Conceptually, <span class="h-media">Mylo Xyloto</span> is a concept album, and a thematic rock opera.
<p>Conceptually, <a class="h-media" href="//">Mylo Xyloto</a> is a concept album, and a thematic rock opera.
<section class="h-media">
	<p>Conceptually, <a class="p-name" href="//">Mylo Xyloto</a> is a concept album, and a thematic rock opera.

		<tr class="h-media">
			<td class="p-track">1.
			<td class="p-name">Mylo Xyloto
			<td class="p-duration">0:43
		<tr class="h-media">
			<td class="p-track">2.
			<td class="p-name">Hurts Like Heaven
			<td class="p-duration">4:02
		<tr class="h-media">
			<td class="p-track">3.
			<td class="p-name">Paradise
			<td class="p-duration">4:37
		<tr class="h-media">
			<td class="p-track">4.
			<td class="p-name">Charlie Brown
			<td class="p-duration">4:45
		<tr class="h-media">
			<td class="p-track">5.
			<td class="p-name">Us Against the World
			<td class="p-duration">3:59
		<tr class="h-media">
			<td class="p-track">6.
			<td class="p-name">M.M.I.X.
			<td class="p-duration">0:49
		<tr class="h-media">
			<td class="p-track">7.
			<td class="p-name">Every Teardrop Is a Waterfall
			<td class="p-duration">4:00
		<tr class="h-media">
			<td class="p-track">8.
			<td class="p-name">Major Minus
			<td class="p-duration">3:30
		<tr class="h-media">
			<td class="p-track">9.
			<td class="p-name">U.F.O.
			<td class="p-duration">2:17
		<tr class="h-media">
			<td class="p-track">10.
			<td class="p-name">Princess of China (featuring Rihanna)
			<td class="p-duration">3:59
		<tr class="h-media">
			<td class="p-track">11.
			<td class="p-name">Up in Flames
			<td class="p-duration">3:13
		<tr class="h-media">
			<td class="p-track">12.
			<td class="p-name">A Hopeful Transmission
			<td class="p-duration">0:33
		<tr class="h-media">
			<td class="p-track">13.
			<td class="p-name">Don't Let It Break Your Heart
			<td class="p-duration">3:54
		<tr class="h-media">
			<td class="p-track">14.
			<td class="p-name">Up with the Birds
			<td class="p-duration">3:45

properties of h-media

property type description example data (MP3)
album string album, collection "yayQuery"
artist string, array artist(s) / performer(s) "Jonathan Neal"
bitrate number bitrate per second 192000
bpm number beats per minute 140
channel number channel(s) 2
channel-mode string channel mode "joint stereo"
codec string encoding method or tool "LAME"
compilation boolean part of a compilation "false"
copyright string copyright "Copyright 2012 Jonathan Neal"
date string release date "2012"
depth number depth in pixels null
duration number duration, duration in milliseconds "4:04", 244000
genre string genre "pop"
height number height in pixels null
language string ISO 639-1 primary language "en-us"
lossless number losslessness false
name string name or title "Bye Bye Hacker"
note string additional information "In memory of Hackers (1995)"
photo string image "cover.jpg"
sample-rate number sample rate 44100
size number size 8.3 MB
src string path "song.mp3"
total number number of tracks 15
track number chapter, index, track 13
transcript string contents / lyrics / subtitles "You're a hacker..."
type number format or type "MP3"
width number width in pixels null
Copy link

This is much better than the current wiki proposal for h-media. Thanks for taking the time to do this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment