path: root/2020/info/05.md

# Bard Bivou(m)acs - Building a bandcamp-like page for an album of music
Grant Shangreaux

[[!template id=vid vidid="mainVideo" src="https://mirror.csclub.uwaterloo.ca/emacsconf/2020/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux.webm" subtitles="/2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux.vtt"]]
[Download compressed .webm video (20.3M)](https://mirror.csclub.uwaterloo.ca/emacsconf/2020/smaller/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux--vp9-q56-video-original-audio.webm)  
[View transcript](#transcript)

[[!template id=vid src="https://mirror.csclub.uwaterloo.ca/emacsconf/2020/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--questions--grant-shangreaux.webm" download="Download Q&A video, 720p" subtitles="/2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--questions--grant-shangreaux.vtt"]]
[Download compressed Q&A .webm video (15.7M)](https://mirror.csclub.uwaterloo.ca/emacsconf/2020/smaller/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--questions--grant-shangreaux--vp9-q56-video-original-audio.webm)  
[View transcript for Q&A](#transcript-questions)

I hoped to become a successful musician someday, and while that has
yet to happen, I've recorded a fair share of unreleased music over the
years.  I decided it was time to share some of it with the world
through the power of Emacs!

Rather than using the available non-free (or even free?) platforms out
there, I decided to build a Bandcamp-like page from scratch.  While I
could have chosen many of the static-site building tools, I decided to
use the tool closest to my heart and automate the process of building
a web page from a directory of audio files with Emacs Lisp.

I will share with you how I managed to create a personal workflow for
releasing an album without leaving the One True Editor that includes
editing audio metadata with EMMS and generating HTML while cobbling
together yasnippet and the format macro.

<https://mirror.csclub.uwaterloo.ca/emacsconf/2020/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux.tar>

<!-- from the pad --->

- Actual start and end time (EST): Start of Q&A: 2020-11-28T10.28.47
  EST; End: 2020-11-28T10.43.49

# Questions

## What does "Bard Bivoumacs" mean?
Bad pun on "Bandcamp" — a bivouac is an improvised campsite and bard = band.

## Does this meta-data workflow also support unsynchronized lyrics within ID3-tags (multi-line meta-data)?
- The UI for EMMS is complex, a gazillion of functions in that
  namespace.
- Check EMMS info manual `(require 'emms-lyrics)` this uses lyrics
  files outside of ID3-tags.
- multi-line metadata may depend on the audio format?


## Is it possible to import batch meta-data?
Not sure, guesses yes. It can connect to metadata services. Backend
calls to shell programs for various purposes.

## My current workflow for tagging music is to first apply ReplayGain in foobar2000, fix egregious mistakes there (like funny directory structure, lack of album artist, &#x2026;), then use beets to apply metadata from Musicbrainz/Discogs and go over the remaining albums with foobar2000 again. I wondered whether there's a chance textual tagging could allow doing it all in one program, have you experimented with mass tag updates/queries?
No experience with that, but it could be possible if someone™ made the
right textual interface and would be very powerful (for example wdired
could be an interesting inspiration).

## Is there a link to some info expanding your philosophy of how to compensate musicians, I was interested to learn more about that.
No; universal (basic?) income would solve a lot of problems.

## What Emacs theme are you using?
kaolin theme, maybe aurora or bubblegum.

## Are you using Doom Emacs, per chance?
- Answered in chat, vanilla Emacs with doom-modeline.
- OK, thanks.

## Is SVG support built in to Emacs?
It's builtin in Emacs 27 (and earlier:
<https://www.emacswiki.org/emacs/EmacsSvg>). You can even take
screenshots from within Emacs as SVG (if compiled `--with-cairo`).

## How do you take SVG screenshots within Emacs?
<https://www.reddit.com/r/emacs/comments/idz35e/emacs_27_can_take_svg_screenshots_of_itself/>

## It seems Mac does not have support for Cairo?
- Might need to manually compile Emacs with support for Cairo
  <https://www.reddit.com/r/emacs/comments/7ewewl/compiling_emacs_26090_with_cairo/>
- Download source code then take a look at the `--help` flag when
  running `./configure`. Cairo support is experimental and can be
  enabled with `./configure --with-cairo`.
  - I see. Thanks again.

# Notes
- Musician.
- Org document presented with org-tree-slide:
  <https://github.com/takaxp/org-tree-slide>
- EMMS (<https://www.gnu.org/software/emms/>) for metadata authoring
  and organising playlists.
  - Creates HTML from EMMS metadata.
- <https://github.com/jagrg/org-emms>
- Publish music by Emacs.
- I liked the example for beginners!
- Uses literate programming style to be able to resume work without
  much time available for programming.
  - See `(info "(org) Working with Source Code")` for single blocks
    <https://github.com/casouri/ftable/blob/master/ftable.elhat> can
    be executed in Emacs with C-c C-c.
  - Several languages combined with noweb `(info "(org) Noweb
    Reference Syntax")`.
- SVG support used for buttons.
- <http://churls.world> °°°
- Meta: "You can even take screenshots from within Emacs as SVG" —
  would it be possible to set up an SVG livestream&#x2026;?
  - I doubt it would be practical to do it at a high framerate, but
    it's worth trying out. The other disadvantage of the approach is
    that there's few vector animation formats (Flash, HTML5), so
    saving it losslessly to disk will be tricky.


<!-- transcript: 2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux.vtt -->

<a name="transcript"></a>
# Transcript

Hello, my name is Grant Shangreaux. This is my talk titled Bard
Bivou(m)acs: Publishing Music with Emacs. I'm a software developer
with Unabridged Software in Lincoln, Nebraska. Long time Emacs user,
relatively new Emacs hacker. Hopefully, I'll be able to show you my
workflow, with how I publish music with Emacs. All right. 

(<a href="#mainVideo" class="time-link">00:30</a>)
So as a musician, I would like to publish my music online. I could
publish with popular online music services, but I'm more of a
DIY-type, so I chose to go ahead and publish with Emacs. What's the
motivation behind this? A lot of it comes down to some fundamental
freedoms that Emacs and GNU software represent to me, as well as my
ideas on culture and my background. I don't believe that music is a
consumer good. It's a form of knowledge, like an algorithm. And it's
just such a part of culture, like in tribal cultures, music was seen
as a gift from the cosmos or the gods. It was a gift maybe through an
individual vessel, but was shared with the people and shared with
everyone, kept alive by the culture itself. So to me, music is
something that should be shared and should be freely enjoyed by
everyone. Of course, artists should be compensated as well, but that's
a whole different topic. 

(<a href="#mainVideo" class="time-link" data-timestamp="99">01:39</a>)
So when I want to share my music, I want to do it without
impacting anyone's freedom. Using GNU software like Emacs is a good
way that I can ensure that I won't be requiring people to sign away
their freedoms for anything. There's a lot more I could say about this
but I don't have time. Feel free to reach out to me by email or IRC.
Part of the motivation for me, personally, is that Emacs is super
magical. It's an all-in-one solution. Like I said, the GNU software
aligns with Creative Commons' ideas. I can do file management. I can
author HTML, all the web stuff I need even, literate-style. I can
handle media and metadata. I've got version control, remote server
access... All the tools I need are right under my fingertips with this
tool that I use every day for a long time. I don't need to look
elsewhere. 

(02:31) It was a challenge. I wanted to see if I could do this all
within Emacs itself. So, how do you use Emacs to publish music? Well,
for me, I needed a couple of things. I needed to be able to audition
and label unlabeled audio tracks. I have a lot of files that I don't
know where they came from. I don't know what they are. I need to be
able to listen to them, and I need to be able to add metadata to
whatever audio format it is and rename the files based on that
metadata, potentially. And in the end, I wanted to take those files
and programmatically produce a web page for people to consume. 

(03:08) I found out that Emacs scores a hundred percent on all of
these requirements that I had for this, and a lot of that came from
EMMS, the Emacs multimedia system. EMMS is great. If you haven't
checked it out, please do. It's a little bit unintuitive, but once you
get into it, you know it works. Basically, what EMMS gave me was the
ability to listen to the tracks, organize playlists. On top of that,
it gave me super-powered metadata authoring. 

(03:42) I'm going to demonstrate that to you. So in order to do this,
you have to require markable playlists, so (require 'emms-mark). I'm
going to go through, and I'm going to open the red... I've got this.
These files here. So you can see these files are mp3s. They're
recorded on a digital recorder. If I had the choice, I would have a
recorder that used a different format, but so be it. I can mark all
these files and I can do EMMS add to .., and now they've been loaded
into a playlist. So you can see the playlist here. There's some
leftover files. 

(04:30) So I've got these three files in my playlist, and as
you can see, it's just the file name, the path. I don't have any
metadata associated with them. In this playlist, I can hit E, and
it'll bring up a buffer showing the tag information that I have. I
could edit these here. I could edit them one at a time, but that's not
really great. I want superpower metadata authoring. So, by marking
them, I can then hit E, and I have all three of the tracks loaded up
in this tags buffer. On top of that, I can do EMMS tag editor, set
all, C-c C-r, and I want to set the artist. so these are some
recordings of my family. So, Shangreaux, set all three of them. I want
to set the album: Spring Walk with Lap Harp. I want to set the year.
And then I'm going to go ahead and put these in manually, but with the
power of Emacs keyboard macros and registers and so on. I could do
this programmatically as well, which would make it a lot easier if I
had much more than three files to do this with. Submit the changes
with C-c C-c, and now we've got the playlist. You can see the artist
and track number have been updated here. 

(6:15) And then the final piece of this is that if you look at this,
you can see that the file name is still the same. So if I were looking
at the directory, I would still have this file name. When packaging
these up for a release, for people to download, it's nice to be able
to have that filename reflect the track number and the artist and so
on. So there's another command, EMMS rename tag editor, rename, so it
could be just capital R. I think I need to mark all of these, hit
capital R, and then it's going to ask me to confirm and say yes to all
of them. And now, if you look in the-- whoops I have to update
it--you'll see it's been updated with the artist, track number and
track name. This format is a format string, so it's customizable of
course. I just decided to go with the default. 

(7:21) So that's pretty great, this workflow just with EMMS. I didn't
have to do anything. This is all there. It's all built in. It gave me
exactly what I was looking for in terms of being able to process a lot
of raw audio files add metadata to them and get them ready for
publishing. And this is for publishing for playback in any media
player. It'll be useful. Not just for the web page that I'm building.

(7:48) So the final part, of course, is to build the web page. Emacs
makes authoring HTML trivial. As I was going through this, I wanted to
challenge myself and just be, like, can I do this just all with Emacs?
Can I just make this? I don't need a... I don't need Ruby. I don't
need Rails. I don't need Node. I don't need any of this other stuff. I
have my tool right here. It's a fully... It's a whole operating
system, basically, plus programming languages. So the first thing I
started with was buffer scripting for manipulating text. That's kind
of the easiest way to do it. Basically, anything you can do in a
buffer, you can do programmatically with Elisp. So this might be a
good example for beginners. If you haven't done any Elisp yet, a
simple example is to create this this div output here. You can use
this with-temp-buffer, so basically creating an imaginary buffer.
insert is just like typing, so you put strings in, you put new lines
in, you can build some strings together. Here you can see I'm doing a
random number, so every time I execute this, my content change. I
can generate dynamic content in HTML blocks with Elisp. 

(9:04) For my web page builder, It's a little more complex. I'm
pulling data out using EMMS data structures, so it's pulling that out
from the track data. And then I'm using some program to generate list
elements, so each track is going to have the title and track number,
and then a button for playing it, plus the source of the audio file,
which will get added here. Right now, this is hard coded for Opus, so
it won't work for my MP3s. I'm going to skip over snippets. Turns out
format strings were good enough for me. Snippets could be useful, but
format is super powerful, and I didn't really even need all that much
power, basically, just doing string interpolation. So if you haven't
seen format before, you basically put these control strings or control
characters inside of a string, and you can generate an output string
that you want. So in my generator code, basically, it's down here, I'm
calling format with this Bard Bivou(m)acs template, and that's
basically a big a big string of HTML. It's just my whole page of HTML
with those control characters in just four places. One of them
populates the track list. That's really the meat of the program.
Again, this is a combination of using buffer scripting, using HTML
mode, inserting text format strings, and then I can indent-region so
the HTML actually looks pretty when it comes out of it as well. I will
show that, just really quick actually. So you can see, this is the
HTML that got generated. I've got my template. I inserted the title
here, the style, the font was all inserted, and then this whole list
of of tracks here. It's kind of messy to look at, but this track list,
this whole div here, is all generated by my generator code, and it
works. It's great. Okay, moving on. 

(11:27) So the other thing was that as I was developing this, I
decided to use Org Babel and some of his its features for
multi-language things because I needed to style it with CSS and and
put actions in Javascript, and also I used SVG for authoring stuff. It
was a little bit complicated. It probably would have been simpler had
I not used Org Babel, but it's also really fun. I think it's a cool,
cool idea to use literate programming. My idea was to create HTML
components. I could name it like this, put a format string inside it,
and build a function in Elisp to format it and spit out the HTML that
I want. By doing this, then, I can just change things in my Org file
which, not getting a whole lot of time to work on it, I can come back
to it and I have a lot of notes. I can kind of generate things as I'm
going and keep notes for myself, and keep the... I don't know. It's
cool. Literate programming is fun. So I don't need to go into that too
much, but you can see if I execute this here, I get the the div that I
want. It's a little bit funny. You'll see I have the string like this,
the way that noweb expands, I can't do this on a single line. It looks
funny when you do that, so that might be something to work out later.
CSS blocks can either be tangled out and referenced in the HTML source
or inlined. Here's an example I have of inlining it. So I've got my
little CSS block named style, Javascript named script, and then I've
got this HTML source block with noweb expansion. These double angle
brackets here are where I'm going to expand the block named style. I'm
actually calling a function, so I want the result of the function
here, and then the script will just get expanded here. So
org-babel-expand-src-block, you can see what it looks like. I've got
my style here. I've got my title. I've got that main content class I
showed before, and the script as well. So that's kind of cool. I could
just run org-babel-tangle and get my thing out and just edit one file
instead of multiple files. Not for everyone, but I thought it was kind
of fun. All right. 

(13:45) Oh, and the final thing is that in Emacs, you can author and
view SVG. So this is just an Org. This SVG, I used to make the play
and pause buttons. I didn't know this, but if you edit an SVG file,
you can toggle back and forth between the code and the image. It's
pretty sweet. So I can iteratively work through this because of how
Emacs is. 

(14:20) Final considerations here, like when doing this, I want it to
be all free, so I want to use fonts that use a free license. I found
GNU Unifont. It's kind of cool. The content license... I chose
Creative Commons Attribution ShareAlike, which is kind of like the
GPL. Ideally, I could serve it with Emacs. I'd like to remove
idiosyncrasy so other people can use it. It's pretty much just my tool
right now. Not requiring the web browser... I can ship playlists so
that you can just click or link to a playlist on your favorite player,
even EMMS if you want, and then packing up those albums in like a ZIP
or .tar file. 

(15:04) So you can go to churls.world . It just has a link to this
album. I'll display it here in just a second. You can contact me. I'm
shoshin on #emacs in IRC and on sourcehut. You can email me
grant@churls.world, personal, or grant@unabridgedsoftware.com. All
right, now. Let's see about this... This is up online, so if you want
to listen to my college band's album from 20 years ago, here it is:
Cassiopeia Basement Days. Whoops. I made this art in Krita. You can
press play. You can skip around. I do have the playlist up here too.
So yeah, thanks for listening. I hope you enjoyed it, and enjoy the
rest of EmacsConf. Goodbye!

<!-- /transcript -->


<!-- transcript: 2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--questions--grant-shangreaux.vtt -->

<a name="transcript-questions"></a>
# Transcript: Q&A

So first question, what does Bard Bivou(m)acs mean? Good question. In
one version of my talk, I spent too long explaining it, and decided to
cut it out. It's basically a bad pun on band camp. A bivouac--I don't
even know if I'm pronouncing that correctly--it's like a tent or a
camp that you put up hastily, and a bard is a musician, of course.
Yeah, I don't know. I like puns. I'm a dad. That's the best I could
come up with. I'll probably find a different name for it but I liked
that "bivoaucs," if you stick an m in there, it becomes Bivou(m)acs.
It's kind of like editor macros for generating some HTML. Yes, it is
confusing, chatting on IRC at the same time. Great question. (Amin:
Grant, so right now, you're sharing your screen. Are you planning on
showing something with it, or for example, should I maximize you?) I
don't know. I can turn it off for now. Okay. (Amin: You can turn on
the webcam.) Yeah, okay. (Amin: I'll maximize your webcam.) Okay,
thanks. I'll get to the answer for my color theme here in a bit in
IRC. 

(1:31) Next question on the Etherpad, does this metadata workflow also
support unsynchronized lyrics within ID3 tags, multi-line metadata? I
don't know, actually. It's funny because I was trying out different
things with metadata, and really the biggest thing was to figure out
how to do mass tag editing. And that was like... It wasn't very
intuitive, like I said, with EMMS. I think EMMS is really great, but
its interface is huge. like if you do M-x and type emms, you get I
don't know, 270-some candidates. There's a lot of functions going on.
I basically found the features that I needed to get this workflow
working. I would guess that you probably can do it, and if you don't,
if you can't do it out of the box, I think you could script EMMS to do
that. I'd like to know more, and I'm certainly going to be
investigating it. I will try and post my findings somewhere online. 

(2:39) Is it possible to import batch metadata? I'm not sure. I would
guess yes is the answer. EMMS can connect to metadata services. I
haven't done that because I was just using audio files that I created
myself. I know that on the back end, it calls out to shell programs
for tagging things. there's a lot of different options that can shell
out too. I was using the the vorbis tools to tag the particular files
I was working with. You can also use tiny tag, and there's some
other... That might be the python library. I can't remember. There's
two other libraries that I can shell out to for doing metadata. 

(3:24) My current workflow for tagging music is to first apply replay
gain in fubar 2000, fix egregious mistakes, use beats to apply
metadata from music brains, or discogs, go over remaining albums with
fubar 2000 again. Is there a chance textual tagging could allow doing
it all in one program? Have I experimented with mass tag update
queries? I have not. Again, I was just doing this workflow, taking raw
files with no tags and doing that. I believe because it calls out to
the programs in the back end, I'm sure you could work that out. I
think EMMS would benefit from having something like that because we
work with text, and being able to use Emacs as a front end for those
updates would be really fantastic. So really, it's just a matter of
writing the interface to the external tool. 

(4:22) Is there a link to some info expanding philosophy of how to
compensate musicians? No, I don't really have a lot of philosophy
around that. I guess the first thing I could say would be something
like a universal income. I feel like that would solve a lot of
problems, if musicians could just be musicians and not have to worry
about their pay. I will think about it more. This is one of my first
forays into getting public with some of these ideas, so I will try to
do more and let the community know. 

(4:54) What Emacs theme am I using? Can't remember. It's one of the
Kaolin themes. I think it was Aurora or or Bubble Gum, maybe, but the
Kaolin themes are nice. I recommend them. Not using Doom Emacs, Doom
mode line though. It's very pretty.

(5:17) SVG support built into Emacs? I'm using Emacs 27.1, and yes,
SVG support is built in. I may have had to compile it with some Cairo
support. I don't remember for sure. But yes, you can even take
screenshots of your Emacs from within Emacs in SVG. It's pretty great.
I don't know how much more time we have left for questions. That's
most of the things on the etherpad. (Amin: I think we have like 10
more minutes to catch up with the schedule. If there are more
questions, feel free to answer them.) I'll start looking through IRC.
(Amin: And keep an eye on the pad too.) Thank you all for listening
and for enjoying the talk. I'm glad it turned out well. Awesome. Yeah,
it's been fun so far. How did I manage? I can post a snippet of that,
or actually I can share my screen, can't I... Okay. I actually have it
up right here. 

(6:49) So I think I got this from alphapapa, to be honest. I define
screenshot-svg. It's an interactive command. Oh yeah, there's
alphae.papa Okay, there we go. I would like to change this so that I
can get it into the copy-paste buffer so I don't have to copy the file
in, but I haven't really hacked on it yet. 

(7:20) Okay, org heading colors. That might be a good question. I know, the
presentation... Sorry, it's hard to think and type at the same time.
Think and talk and type. 

(7:41) So the presentation is just a normal org file, right, so I have my
headers, and the author--you can even stick your email and other
headers in there. But there's a package called org-tree-slide. Whoops,
why is it not... I must have not required it. Good question. (Amin:
Grant, can you try sharing your screen maybe?) Oh, is it not shared?
I'm sorry. (Amin: Thank you.) There we go, should be coming up. (Amin:
It's coming up. Yep, we see it.) Awesome. All right. Okay. I don't
know why this isn't working. It was working. Okay, you want to see the
screenshot. Whoops. Okay, I just took a screenshot. So, org-tree-slide.
I don't know why it's not launching. I thought that I had required it,
but I must not have. Maybe I'll try. Okay. So there we go. So
org-tree-slide is a way that basically uses narrowing and some kind of
font tricks to... it changes your titles or your metadata into this
banner for the title here, and it automatically sets the faces for
you. You can customize that, of course. And then, as you go through
the Org file, you get these kind of nice animations and-- what's it
called--breadcrumbs up at the top. So org-tree-slide. I highly
recommend it. It's really nice because you can give your presentation
and practice it, and while you're practicing it, you can edit things
as well, because it's still just an Org document using narrowing, you
know. It doesn't actually change anything. Definitely recommend
org-tree-slide mode. Okay, let's see, what else... 

(10:29) Share my screen to demo. Oh, that's the SVG. Let's see. Okay, so I
don't know if you can see this now, but I'm actually viewing the SVG
screenshot that I took with Emacs. See here's the source of it. So
Emacs made that. And here's the image. It's cool because you can even
do it again and again, and open more screenshots of screenshots. Yeah,
definitely Emacsception. Fun stuff. Anything else in chat? Heading
colors? Oh, yeah. I talked about the themes. This is another Kaolin
theme. I think the one in the talk was maybe this one, Aurora. Oh,
here, there's something funny when you start org-tree-slide with a
different theme. This top header bar gets the faces from that previous
theme. I have not figured out how to fix that yet. Did I have to
compile to get the screenshot? I think maybe I did. Yes, if I'm
remembering correctly. I got Emacs 27. I'm not on a Mac. I saw
alphapapa's comment on reddit, and then I recompiled it with Cairo
support. Yes. 

(12:18) Okay, lots of good conversation on here. Yep, I have like one or two
more minutes. Okay I guess while I'm here, I might as well say thank
you to the organizers. I really appreciate everybody's work on this.
It's fun to be a part of this community. I'm enjoying the other talks
I've seen so far today, and I'm looking forward to to the rest. It's
really interesting, just from being on Emacs in IRC for a few months,
I've already connected with a lot of interesting people and have a lot
of cool connections already. (Amin: Thank you for being a part of the
community, Grant.) That's good to be here. I have another talk
tomorrow as well. Oh, thanks for everyone in the Etherpad for putting
more comments on these questions here and taking the notes. (Amin: I
think that's about all the time that we have for the Q&A. Okay. Thank
you again so much, Grant, for your awesome talk and for popping in for
questions.) Yeah, thanks again for hosting. See you later. Cheers!

<!-- /transcript -->