diff --git a/web/ascoltami/Light9SongListing.ts b/web/ascoltami/Light9SongListing.ts
new file mode 100644
--- /dev/null
+++ b/web/ascoltami/Light9SongListing.ts
@@ -0,0 +1,122 @@
+import debug from "debug";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { NamedNode } from "n3";
+import { getTopGraph } from "../RdfdbSyncedGraph";
+import { show } from "../show_specific";
+import { SyncedGraph } from "../SyncedGraph";
+export { Light9TimelineAudio } from "../light9-timeline-audio";
+export { Light9CursorCanvas } from "../Light9CursorCanvas";
+export { RdfdbSyncedGraph } from "../RdfdbSyncedGraph";
+export { ResourceDisplay } from "../ResourceDisplay";
+const log = debug("songs");
+
+async function postJson(url: string, jsBody: Object) {
+  return fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "applcation/json" },
+    body: JSON.stringify(jsBody),
+  });
+}
+
+class SongRow {
+  constructor(public uri: NamedNode, public label: string) {}
+}
+
+@customElement("light9-song-listing")
+export class Light9SongListing extends LitElement {
+  static styles = [
+    css`
+      td {
+        font-size: 18pt;
+        white-space: nowrap;
+        padding: 0 10px;
+        background: #9b9b9b;
+      }
+      tr.current td {
+        background: #dbf5e4;
+      }
+      tr td:first-child {
+        box-shadow: initial;
+      }
+      tr.current td:first-child {
+        box-shadow: inset 0px 2px 10px 0px black;
+      }
+      button {
+        min-height: 30pt;
+        min-width: 65pt;
+      }
+    `,
+  ];
+  graph!: SyncedGraph;
+  @state() playingSong: NamedNode | null = null;
+  @property() selectedSong: NamedNode | null = null;
+  @state() songs: SongRow[] = [];
+  @state() isPlaying = false;
+  constructor() {
+    super();
+    getTopGraph().then((g) => {
+      this.graph = g;
+      this.graph.runHandler(this.getSongs.bind(this), "getsongs");
+      this.graph.runHandler(this.playState.bind(this), "playstate");
+    });
+  }
+  getSongs() {
+    this.songs = [];
+    const U = this.graph.U();
+    try {
+      const playlist: NamedNode = this.graph.uriValue(show, U(":playList"));
+
+      (this.graph.items(playlist) as NamedNode[]).forEach((song: NamedNode) => {
+        this.songs.push(new SongRow(song, this.graph.labelOrTail(song)));
+      });
+    } catch (e) {
+      // likely it's startup- no graph yet
+      log(e);
+    }
+  }
+  playState() {
+    const U = this.graph.U();
+    try {
+      this.isPlaying = this.graph.booleanValue(U(":ascoltami"), U(":playing"));
+      this.playingSong = this.graph.uriValue(U(":ascoltami"), U(":song"));
+    } catch (e) {
+      log(e);
+    }
+  }
+  render() {
+    return html`
+      <table>
+        ${this.songs.map((song) => {
+          const playing = this.playingSong && song.uri.equals(this.playingSong);
+          const selected = this.selectedSong && song.uri.equals(this.selectedSong);
+          // could use <resource-display .uri=${song} noclick></resource-display>
+          return html`
+            <tr class="song ${playing ? "current" : ""}" data-uri=${song.uri.value} @click=${this.clickSongRow}>
+              <td>
+                <a href=${song.uri.value}>
+                  <span class="num">${song.label.slice(0, 2)}</span>
+                  <span class="song-name">${song.label.slice(2).trim()}</span>
+                </a>
+              </td>
+              <td>
+                <button ?disabled=${this.isPlaying || (this.selectedSong != null && !selected)}>${selected ? "Deselect" : "Select"}</button>
+              </td>
+            </tr>
+          `;
+        })}
+      </table>
+    `;
+  }
+  clickSongRow(ev: MouseEvent) {
+    ev.preventDefault();
+    const row = (ev.target as HTMLElement).closest(".song") as HTMLElement;
+    const song = new NamedNode(row.dataset.uri!);
+    if (this.selectedSong && song.equals(this.selectedSong)) {
+      this.selectedSong = null;
+    } else {
+      this.selectedSong = song;
+    }
+    this.dispatchEvent(new CustomEvent("selectsong", { detail: { song: this.selectedSong } }));
+  }
+}