Skip to content

Instantly share code, notes, and snippets.



Last active Dec 21, 2015
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

This comment has been minimized.

Copy link

@ericelliott ericelliott commented Oct 27, 2013

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
You can’t perform that action at this time.