diff options
4 files changed, 1144 insertions, 1253 deletions
diff --git a/2020/info/05.md b/2020/info/05.md index 7f9ff263..a8a10f3a 100644 --- a/2020/info/05.md +++ b/2020/info/05.md @@ -1,7 +1,7 @@ # Bard Bivou(m)acs - Building a bandcamp-like page for an album of music Grant Shangreaux -[[!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--grant-shangreaux.webm"]] +[[!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--grant-shangreaux.webm" 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) [[!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"]] diff --git a/2020/organizers-notebook.org b/2020/organizers-notebook.org index b2e12a57..36fdd6ad 100644 --- a/2020/organizers-notebook.org +++ b/2020/organizers-notebook.org @@ -30,7 +30,8 @@ organizers-notebook.org back to the repo. See [[file:info/03/screenplay.fountain]] *** DONE sachac [[../subtitles/emacsconf-2020--04-music-in-plain-text--jonathan-gregory-autogen.sbv]] CLOSED: [2020-12-10 Thu 11:21] -*** TODO sachac [[../subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux-autogen.sbv]] +*** DONE sachac [[../subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux-autogen.sbv]] + CLOSED: [2020-12-10 Thu 12:55] *** TODO [[../subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--questions--grant-shangreaux-autogen.sbv]] *** TODO [[../subtitles/emacsconf-2020--07-beyond-vim-and-emacs-a-scalable-ui-paradigm--questions--sid-kasivajhula-autogen.sbv]] *** TODO [[../subtitles/emacsconf-2020--07-beyond-vim-and-emacs-a-scalable-ui-paradigm--sid-kasivajhula-autogen.sbv]] diff --git a/2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux-autogen.sbv b/2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux-autogen.sbv deleted file mode 100644 index e151d292..00000000 --- a/2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux-autogen.sbv +++ /dev/null @@ -1,1251 +0,0 @@ -0:00:01.360,0:00:07.279 -hello my name is grant shangri - -0:00:04.480,0:00:07.919 -this is my talk titled bard beavermax - -0:00:07.279,0:00:10.719 -publishing - -0:00:07.919,0:00:12.799 -music with Emacs I'm a software - -0:00:10.719,0:00:14.400 -developer with unabridged software in - -0:00:12.799,0:00:16.800 -lincoln nebraska - -0:00:14.400,0:00:18.720 -long time Emacs user relatively new - -0:00:16.800,0:00:20.480 -Emacs hacker - -0:00:18.720,0:00:22.960 -and uh hopefully I'll be able to show - -0:00:20.480,0:00:30.480 -you my workflow with - -0:00:22.960,0:00:33.440 -how I publish music with Emacs - -0:00:30.480,0:00:35.520 -all right so as a musician I would like - -0:00:33.440,0:00:37.200 -to publish my music online - -0:00:35.520,0:00:39.040 -you know I could publish with popular - -0:00:37.200,0:00:42.000 -online music services - -0:00:39.040,0:00:44.719 -but I'm more of a diy type so I chose to - -0:00:42.000,0:00:48.160 -go ahead and publish with Emacs - -0:00:44.719,0:00:49.760 -so what's the motivation behind this - -0:00:48.160,0:00:51.600 -a lot of it comes down to some - -0:00:49.760,0:00:54.960 -fundamental freedoms - -0:00:51.600,0:00:57.920 -that you know Emacs gnu software - -0:00:54.960,0:00:59.120 -kind of represent to me as well as kind - -0:00:57.920,0:01:01.840 -of my - -0:00:59.120,0:01:03.680 -ideas on culture and my background I - -0:01:01.840,0:01:04.080 -don't believe that music is a consumer - -0:01:03.680,0:01:06.080 -good - -0:01:04.080,0:01:08.320 -um it's a form of knowledge like an - -0:01:06.080,0:01:10.479 -algorithm - -0:01:08.320,0:01:13.119 -and it's just like such a part of - -0:01:10.479,0:01:16.640 -culture like in tribal cultures music - -0:01:13.119,0:01:18.000 -was seen as a gift from the cosmos or - -0:01:16.640,0:01:19.920 -the gods and it was - -0:01:18.000,0:01:21.920 -a gift maybe through an individual - -0:01:19.920,0:01:23.520 -vessel but was shared with the people - -0:01:21.920,0:01:26.799 -and shared with everyone - -0:01:23.520,0:01:29.840 -kept alive by the culture itself - -0:01:26.799,0:01:31.520 -and so to me music is something that - -0:01:29.840,0:01:34.640 -should be shared and should be - -0:01:31.520,0:01:36.560 -freely enjoyed by everyone of course - -0:01:34.640,0:01:39.040 -artists should be compensated as well - -0:01:36.560,0:01:41.040 -but that's a whole different topic - -0:01:39.040,0:01:42.720 -and so when I want to share my music I - -0:01:41.040,0:01:43.520 -want to do it without impacting anyone's - -0:01:42.720,0:01:45.680 -freedom - -0:01:43.520,0:01:48.960 -using gnu software like Emacs is a good - -0:01:45.680,0:01:48.960 -way that I can ensure that - -0:01:49.200,0:01:55.840 -I won't be requiring people to - -0:01:52.840,0:01:57.119 -uh sign away their freedoms for anything - -0:01:55.840,0:01:58.799 -there's a lot more I could say about - -0:01:57.119,0:02:00.960 -this but I don't have time - -0:01:58.799,0:02:03.439 -feel free to reach out to me by email or - -0:02:00.960,0:02:06.479 -irc - -0:02:03.439,0:02:08.239 -um and part of the motivation for me - -0:02:06.479,0:02:10.720 -personally is that Emacs is super - -0:02:08.239,0:02:12.720 -magical it's an all-in-one solution - -0:02:10.720,0:02:14.480 -like I said the gnu software aligns with - -0:02:12.720,0:02:16.800 -creative commons ideas - -0:02:14.480,0:02:18.879 -I can do file management I can author - -0:02:16.800,0:02:20.239 -html all the web stuff I need even - -0:02:18.879,0:02:22.640 -illiterate style - -0:02:20.239,0:02:24.640 -I can handle media and metadata I've got - -0:02:22.640,0:02:26.800 -version control remote server access - -0:02:24.640,0:02:28.080 -all the tools I need are right under my - -0:02:26.800,0:02:30.000 -fingertips with this - -0:02:28.080,0:02:31.440 -tool that I use every day for a long - -0:02:30.000,0:02:34.319 -time I don't need to look - -0:02:31.440,0:02:36.319 -elsewhere and it was a challenge I - -0:02:34.319,0:02:39.440 -wanted to see if I could do this - -0:02:36.319,0:02:41.680 -all within Emacs itself so - -0:02:39.440,0:02:43.440 -how do you use Emacs to publish music - -0:02:41.680,0:02:45.120 -well for me I needed - -0:02:43.440,0:02:46.480 -a couple of things I needed to be able - -0:02:45.120,0:02:48.319 -to audition unlabel - -0:02:46.480,0:02:50.000 -unlabeled audio tracks I have a lot of - -0:02:48.319,0:02:51.280 -files that I don't know where they - -0:02:50.000,0:02:53.840 -came from I don't know what they are I - -0:02:51.280,0:02:56.800 -need to be able to listen to them - -0:02:53.840,0:02:58.480 -and I need to be able to add metadata to - -0:02:56.800,0:03:00.800 -whatever audio format it is - -0:02:58.480,0:03:03.200 -and rename the files based on that - -0:03:00.800,0:03:05.120 -metadata potentially - -0:03:03.200,0:03:07.040 -and in the end I wanted to take those - -0:03:05.120,0:03:08.319 -files and programmatically produce a web - -0:03:07.040,0:03:11.920 -page - -0:03:08.319,0:03:14.159 -for people to consume I found out that - -0:03:11.920,0:03:14.879 -Emacs scores a hundred percent on all of - -0:03:14.159,0:03:18.000 -these - -0:03:14.879,0:03:20.720 -requirements that I had for this and - -0:03:18.000,0:03:22.640 -a lot of that came from emms the Emacs - -0:03:20.720,0:03:26.080 -multimedia system - -0:03:22.640,0:03:27.760 -um emms is is great um - -0:03:26.080,0:03:30.000 -if you haven't checked it out please do - -0:03:27.760,0:03:32.959 -it's a little bit unintuitive but - -0:03:30.000,0:03:34.000 -once you get into it you know it works - -0:03:32.959,0:03:36.640 -um - -0:03:34.000,0:03:38.720 -and basically what emms gave me was the - -0:03:36.640,0:03:39.680 -ability to listen to the tracks organize - -0:03:38.720,0:03:41.280 -playlists - -0:03:39.680,0:03:42.959 -and on top of that it gave me super - -0:03:41.280,0:03:45.040 -powered metadata authoring - -0:03:42.959,0:03:47.200 -and I'm going to demonstrate that to you - -0:03:45.040,0:03:50.879 -so in order to do this - -0:03:47.200,0:03:54.879 -you have to require markable playlists - -0:03:50.879,0:03:58.720 -so require ems mark and so I'm going to - -0:03:54.879,0:03:58.720 -go through and I'm going to open the red - -0:03:59.680,0:04:04.480 -I've got this this these files here so - -0:04:02.319,0:04:06.080 -you can see these files are mp3s - -0:04:04.480,0:04:07.599 -um they're recorded on a digital - -0:04:06.080,0:04:09.920 -recorder - -0:04:07.599,0:04:11.760 -um if I had the choice I would have a - -0:04:09.920,0:04:12.319 -recorder that used a different format - -0:04:11.760,0:04:14.640 -but - -0:04:12.319,0:04:16.160 -so be it so I can mark all these files - -0:04:14.640,0:04:20.000 -and I can do ems - -0:04:16.160,0:04:22.880 -add to red and now they've been loaded - -0:04:20.000,0:04:22.880 -into a playlist - -0:04:27.040,0:04:30.400 -so you can see the playlist here there's - -0:04:29.040,0:04:32.000 -some leftover files - -0:04:30.400,0:04:33.759 -so I've got these three files in my - -0:04:32.000,0:04:34.639 -playlist and as you can see it's just - -0:04:33.759,0:04:36.800 -the file name - -0:04:34.639,0:04:38.560 -the path I don't have any metadata - -0:04:36.800,0:04:41.360 -associated with them - -0:04:38.560,0:04:43.440 -in this playlist I can hit e capital e - -0:04:41.360,0:04:47.360 -and it'll bring up a buffer showing - -0:04:43.440,0:04:49.840 -um the tag information that I have - -0:04:47.360,0:04:51.520 -and so I could edit these here and I - -0:04:49.840,0:04:53.919 -could edit them one at a time but that's - -0:04:51.520,0:04:57.440 -not really great I want superpower - -0:04:53.919,0:05:00.320 -metadata authoring so - -0:04:57.440,0:05:00.320 -by marking them - -0:05:04.479,0:05:08.479 -by marking them I can then hit e and I - -0:05:07.680,0:05:10.479 -have - -0:05:08.479,0:05:12.639 -all three of the tracks loaded up in - -0:05:10.479,0:05:15.759 -this tags buffer - -0:05:12.639,0:05:18.800 -on top of that I can do emms - -0:05:15.759,0:05:22.840 -tag editor set all ctrl c control - -0:05:18.800,0:05:25.680 -r and I want to set the artist - -0:05:22.840,0:05:26.320 -so these are some recordings of my - -0:05:25.680,0:05:31.039 -family - -0:05:26.320,0:05:35.600 -so shangri-lux set all three of them - -0:05:31.039,0:05:40.160 -I want to set the album um - -0:05:35.600,0:05:43.600 -spring walk with lap harp - -0:05:40.160,0:05:43.600 -and I want to set the year - -0:05:45.520,0:05:50.840 -and then I'm going to go ahead and put - -0:05:48.960,0:05:53.759 -these in - -0:05:50.840,0:05:55.840 -manually - -0:05:53.759,0:05:57.039 -but with the power of Emacs keyboard - -0:05:55.840,0:05:59.600 -macros and - -0:05:57.039,0:06:02.319 -registers and so on I could do this - -0:05:59.600,0:06:04.000 -programmatically as well - -0:06:02.319,0:06:06.000 -which would make it a lot easier if I - -0:06:04.000,0:06:07.440 -hadn't met much more than three files to - -0:06:06.000,0:06:09.919 -do this with - -0:06:07.440,0:06:11.520 -submit the changes with ctrl c ctrl c - -0:06:09.919,0:06:13.120 -and now we've got the playlist you can - -0:06:11.520,0:06:15.039 -see the artist and track number have - -0:06:13.120,0:06:17.360 -been updated here - -0:06:15.039,0:06:19.039 -and then the final piece of this is that - -0:06:17.360,0:06:20.479 -if you look at this you can see that the - -0:06:19.039,0:06:22.639 -file name is still the same - -0:06:20.479,0:06:24.560 -so if I were looking to the directory I - -0:06:22.639,0:06:26.479 -would still have this file name - -0:06:24.560,0:06:28.000 -when packaging these up for a release - -0:06:26.479,0:06:30.319 -for people to download - -0:06:28.000,0:06:32.400 -it's nice to be able to have that file - -0:06:30.319,0:06:34.800 -name reflect the track number and the - -0:06:32.400,0:06:35.680 -artist and so on so there's another - -0:06:34.800,0:06:38.240 -command - -0:06:35.680,0:06:38.240 -mms - -0:06:41.199,0:06:45.120 -rename tag editor rename so it could be - -0:06:44.160,0:06:47.199 -just capital r - -0:06:45.120,0:06:48.880 -I think I need to mark all of these hit - -0:06:47.199,0:06:50.000 -capital r and then it's going to ask me - -0:06:48.880,0:06:53.599 -to confirm - -0:06:50.000,0:06:53.599 -and say yes to all of them - -0:06:54.400,0:07:04.319 -and now if you look in the dread - -0:07:02.720,0:07:06.319 -whoops I have to update it you'll see - -0:07:04.319,0:07:09.840 -it's been updated with the artist - -0:07:06.319,0:07:11.120 -the name track and track number and - -0:07:09.840,0:07:14.639 -track name - -0:07:11.120,0:07:17.360 -um so this format is a format string so - -0:07:14.639,0:07:20.479 -it's customizable of course - -0:07:17.360,0:07:21.039 -I just decided to go with the default so - -0:07:20.479,0:07:24.160 -that's - -0:07:21.039,0:07:26.000 -pretty great this workflow - -0:07:24.160,0:07:28.080 -just with emms I didn't have to do - -0:07:26.000,0:07:30.960 -anything this is all there it's all - -0:07:28.080,0:07:32.639 -all built in um it gave me exactly what - -0:07:30.960,0:07:35.599 -I was looking for in terms of being able - -0:07:32.639,0:07:37.599 -to process a lot of raw audio files - -0:07:35.599,0:07:39.280 -add metadata to them and get them ready - -0:07:37.599,0:07:41.599 -for publishing - -0:07:39.280,0:07:43.520 -and this is for publishing for playback - -0:07:41.599,0:07:44.879 -in any media player it'll it'll be - -0:07:43.520,0:07:46.560 -useful - -0:07:44.879,0:07:48.479 -not just for the web page that I'm - -0:07:46.560,0:07:50.560 -building so the - -0:07:48.479,0:07:53.440 -final part of course is um to build the - -0:07:50.560,0:07:54.960 -web page and Emacs makes authoring html - -0:07:53.440,0:07:57.440 -trivial - -0:07:54.960,0:07:59.039 -like as I was going through this I - -0:07:57.440,0:08:00.400 -wanted to challenge myself and just be - -0:07:59.039,0:08:03.120 -like can I do this with all - -0:08:00.400,0:08:03.520 -just all with Emacs like can I just make - -0:08:03.120,0:08:05.440 -this - -0:08:03.520,0:08:07.039 -I don't need a I don't need ruby I don't - -0:08:05.440,0:08:08.960 -need rails I don't need node I don't - -0:08:07.039,0:08:10.560 -need any of this other stuff I have my - -0:08:08.960,0:08:12.560 -tool right here it's a fully - -0:08:10.560,0:08:15.039 -it's a whole operating system basically - -0:08:12.560,0:08:17.360 -plus programming languages - -0:08:15.039,0:08:19.919 -so the first thing I started with was - -0:08:17.360,0:08:22.560 -buffer scripting for manipulating text - -0:08:19.919,0:08:24.319 -that's kind of the easiest way to do it - -0:08:22.560,0:08:25.280 -and basically anything you can do in a - -0:08:24.319,0:08:28.479 -buffer you can do - -0:08:25.280,0:08:30.319 -programmatically with e-lisp so this - -0:08:28.479,0:08:33.919 -might be a good example for beginners if - -0:08:30.319,0:08:36.000 -you haven't done any e-lisp yet - -0:08:33.919,0:08:36.959 -like a simple example is to create this - -0:08:36.000,0:08:40.000 -this div - -0:08:36.959,0:08:41.760 -output here I can you - -0:08:40.000,0:08:44.240 -can use this with temp buffer so - -0:08:41.760,0:08:46.640 -basically creating an imaginary buffer - -0:08:44.240,0:08:48.800 -insert is just like typing so you put - -0:08:46.640,0:08:50.959 -strings in you put new lines in - -0:08:48.800,0:08:52.080 -can cap build some strings together and - -0:08:50.959,0:08:54.000 -here you can see I'm - -0:08:52.080,0:08:55.360 -I'm doing a random number so every time - -0:08:54.000,0:08:57.920 -I execute this - -0:08:55.360,0:09:01.040 -my content changes so I can generate - -0:08:57.920,0:09:04.399 -dynamic content in html blocks - -0:09:01.040,0:09:05.920 -with e-lisp for my - -0:09:04.399,0:09:08.000 -web page builder it's a little more - -0:09:05.920,0:09:12.080 -complex I'm pulling data out - -0:09:08.000,0:09:15.440 -using emms data structures - -0:09:12.080,0:09:16.080 -so it's pulling that out from the track - -0:09:15.440,0:09:18.720 -data - -0:09:16.080,0:09:19.440 -and then I'm I'm using some program - -0:09:18.720,0:09:21.440 -program to - -0:09:19.440,0:09:23.200 -generate list elements so each track is - -0:09:21.440,0:09:25.120 -going to have the title - -0:09:23.200,0:09:26.959 -and track number and then a button for - -0:09:25.120,0:09:29.519 -playing it plus the source - -0:09:26.959,0:09:30.480 -of the audio file which will get added - -0:09:29.519,0:09:32.640 -here - -0:09:30.480,0:09:34.839 -right now this is hard coded for opus so - -0:09:32.640,0:09:37.200 -it won't work for my - -0:09:34.839,0:09:39.120 -mp3s um - -0:09:37.200,0:09:41.200 -I'm going to skip over snippets turns - -0:09:39.120,0:09:45.519 -out format strings were good enough - -0:09:41.200,0:09:48.160 -for me um snippets could be useful but - -0:09:45.519,0:09:49.839 -format is super powerful and I didn't - -0:09:48.160,0:09:51.279 -really even need all that much power - -0:09:49.839,0:09:53.519 -basically just doing string - -0:09:51.279,0:09:54.560 -interpolation so if you haven't seen - -0:09:53.519,0:09:56.720 -format before - -0:09:54.560,0:09:59.120 -you basically put these control strings - -0:09:56.720,0:10:03.120 -or control characters inside of a string - -0:09:59.120,0:10:05.040 -and you can generate you can generate an - -0:10:03.120,0:10:07.600 -output string that you want - -0:10:05.040,0:10:08.720 -so in my generator code basically it's - -0:10:07.600,0:10:10.959 -down here - -0:10:08.720,0:10:12.800 -um I'm calling format with this sparred - -0:10:10.959,0:10:15.920 -vivomax template - -0:10:12.800,0:10:18.240 -and that's basically a big - -0:10:15.920,0:10:20.399 -a big string of html it's just each you - -0:10:18.240,0:10:21.200 -know my whole page of html with a couple - -0:10:20.399,0:10:22.959 -places - -0:10:21.200,0:10:24.399 -with those control characters in just - -0:10:22.959,0:10:26.399 -four places - -0:10:24.399,0:10:29.760 -and one of them populates the track list - -0:10:26.399,0:10:32.079 -that's really the meat of the program - -0:10:29.760,0:10:33.440 -and again this is a combination of using - -0:10:32.079,0:10:36.640 -buffer scripting - -0:10:33.440,0:10:37.279 -using html mode inserting text format - -0:10:36.640,0:10:40.000 -strings - -0:10:37.279,0:10:41.920 -and then I can indent region so the html - -0:10:40.000,0:10:45.200 -actually looks pretty - -0:10:41.920,0:10:50.160 -when it comes out of it as well - -0:10:45.200,0:10:52.560 -um I will show that just really quick - -0:10:50.160,0:10:52.560 -actually - -0:10:54.000,0:10:58.800 -so you can see this is the html that got - -0:10:56.880,0:11:02.560 -generated I've got my template - -0:10:58.800,0:11:05.760 -I inserted the title here the style the - -0:11:02.560,0:11:07.920 -font was all inserted - -0:11:05.760,0:11:11.200 -and then this whole list of of tracks - -0:11:07.920,0:11:14.399 -here it's kind of messy to look at - -0:11:11.200,0:11:15.920 -but this track list this whole div here - -0:11:14.399,0:11:18.560 -is all generated by - -0:11:15.920,0:11:20.800 -my generator code and it works it's - -0:11:18.560,0:11:20.800 -great - -0:11:22.480,0:11:26.160 -okay moving on - -0:11:27.120,0:11:32.079 -um so the other thing was that as I was - -0:11:30.240,0:11:33.200 -developing this I decided to use ort - -0:11:32.079,0:11:35.360 -babel and some of his - -0:11:33.200,0:11:36.880 -its features um for multi-language - -0:11:35.360,0:11:37.839 -things because I needed to style it with - -0:11:36.880,0:11:40.480 -css and - -0:11:37.839,0:11:42.480 -and put actions in javascript and also I - -0:11:40.480,0:11:45.519 -used svg for authoring stuff - -0:11:42.480,0:11:46.079 -um and it was a little bit complicated I - -0:11:45.519,0:11:47.680 -probably - -0:11:46.079,0:11:49.600 -probably would have been simpler had I - -0:11:47.680,0:11:51.440 -not used org babble but it's also really - -0:11:49.600,0:11:53.839 -fun and it's I think it's a cool - -0:11:51.440,0:11:55.839 -cool idea to use literate programming my - -0:11:53.839,0:11:57.600 -idea was to create kind of like html - -0:11:55.839,0:11:59.519 -components like I could name it like - -0:11:57.600,0:12:01.440 -this - -0:11:59.519,0:12:02.800 -put a format string inside it and build - -0:12:01.440,0:12:05.519 -a function - -0:12:02.800,0:12:07.120 -in e-lisp to format it and spit out the - -0:12:05.519,0:12:10.320 -html that I want - -0:12:07.120,0:12:12.880 -and by doing this then I can like uh - -0:12:10.320,0:12:14.320 -just change things in my org file which - -0:12:12.880,0:12:16.959 -not getting a whole lot of time to work - -0:12:14.320,0:12:19.839 -on it I can come back to it and - -0:12:16.959,0:12:21.920 -I have a lot of notes and I can I can - -0:12:19.839,0:12:24.399 -kind of generate things as I'm going and - -0:12:21.920,0:12:25.600 -keep notes for myself and keep the - -0:12:24.399,0:12:27.519 -I don't know it's cool literate - -0:12:25.600,0:12:29.279 -programming is fun um so I don't need to - -0:12:27.519,0:12:31.040 -go into that too much but you can see if - -0:12:29.279,0:12:33.360 -I execute this here - -0:12:31.040,0:12:34.880 -I get the the div that I want um it's a - -0:12:33.360,0:12:36.480 -little bit funny you'll see I have the - -0:12:34.880,0:12:39.200 -string like this the way that - -0:12:36.480,0:12:40.000 -no web expands I can't do this on a - -0:12:39.200,0:12:43.839 -single line - -0:12:40.000,0:12:45.440 -it it it looks funny when you do that - -0:12:43.839,0:12:48.560 -so that might be something to work out - -0:12:45.440,0:12:48.959 -later css blocks can either be tangled - -0:12:48.560,0:12:51.680 -out - -0:12:48.959,0:12:52.639 -and referenced in the html source or - -0:12:51.680,0:12:54.639 -inlined - -0:12:52.639,0:12:56.959 -here's an example I have of inlining it - -0:12:54.639,0:13:00.320 -so I've got my little css block name - -0:12:56.959,0:13:03.040 -style javascript name script - -0:13:00.320,0:13:04.839 -and then I've got this html source block - -0:13:03.040,0:13:07.519 -with no web - -0:13:04.839,0:13:07.920 -expansion um these double angle brackets - -0:13:07.519,0:13:09.839 -here - -0:13:07.920,0:13:11.680 -are where I'm going to expand the block - -0:13:09.839,0:13:12.639 -name style I'm actually calling a - -0:13:11.680,0:13:14.399 -function - -0:13:12.639,0:13:17.040 -so I want the result of the function - -0:13:14.399,0:13:20.560 -here and then the script will just get - -0:13:17.040,0:13:22.959 -expanded here so or babel expand source - -0:13:20.560,0:13:25.360 -block - -0:13:22.959,0:13:28.160 -you can see what it looks like you know - -0:13:25.360,0:13:29.920 -I've got my style here I've got my title - -0:13:28.160,0:13:31.279 -I've got that main content class I - -0:13:29.920,0:13:33.040 -showed before - -0:13:31.279,0:13:34.480 -and the script as well so that's kind of - -0:13:33.040,0:13:36.320 -cool like - -0:13:34.480,0:13:38.160 -I could just run org babel tangle and - -0:13:36.320,0:13:40.480 -get my thing out and just - -0:13:38.160,0:13:41.600 -edit one file instead of multiple files - -0:13:40.480,0:13:45.120 -not for everyone - -0:13:41.600,0:13:45.120 -but I I thought it was kind of fun - -0:13:45.839,0:13:49.199 -all right oh and the final thing is that - -0:13:47.760,0:13:52.880 -in Emacs you can - -0:13:49.199,0:13:57.199 -author and view svg so this is just an - -0:13:52.880,0:13:59.519 -org um this svg I used to make the play - -0:13:57.199,0:14:02.800 -and pause buttons but I didn't know this - -0:13:59.519,0:14:04.959 -but if you edit an svg file you can - -0:14:02.800,0:14:07.360 -toggle back and forth - -0:14:04.959,0:14:07.360 -between - -0:14:08.800,0:14:13.120 -between the code and the and the image - -0:14:13.199,0:14:17.360 -it's pretty sweet so I can kind of - -0:14:16.160,0:14:19.680 -iteratively work - -0:14:17.360,0:14:20.560 -work through this because of of how - -0:14:19.680,0:14:24.480 -Emacs is - -0:14:20.560,0:14:24.959 -like that so um final considerations - -0:14:24.480,0:14:27.360 -here - -0:14:24.959,0:14:29.279 -like when doing this I want it to be all - -0:14:27.360,0:14:30.079 -free so I want to use fonts that use a - -0:14:29.279,0:14:32.800 -free license - -0:14:30.079,0:14:34.800 -I found gnu unifont it's kind of cool - -0:14:32.800,0:14:37.600 -the content license I chose - -0:14:34.800,0:14:39.920 -creative commons attribution share like - -0:14:37.600,0:14:42.880 -which is kind of like the gpl - -0:14:39.920,0:14:44.800 -ideally I could serve it with Emacs I'd - -0:14:42.880,0:14:46.320 -like to remove idiosyncrasy so other - -0:14:44.800,0:14:48.720 -people can use it - -0:14:46.320,0:14:51.040 -it's pretty much just my tool right now - -0:14:48.720,0:14:51.440 -um not requiring the web browser I can - -0:14:51.040,0:14:54.079 -ship - -0:14:51.440,0:14:54.480 -playlists so that you can just you know - -0:14:54.079,0:14:58.000 -click - -0:14:54.480,0:15:00.639 -or link to a playlist on your favorite - -0:14:58.000,0:15:02.639 -player even emms if you want and then - -0:15:00.639,0:15:04.320 -packing up those albums in like a zip or - -0:15:02.639,0:15:08.639 -tar file - -0:15:04.320,0:15:10.880 -so um you can go to churls.world - -0:15:08.639,0:15:14.000 -it just has a link to this album I'll - -0:15:10.880,0:15:17.519 -display it here in just a second - -0:15:14.000,0:15:21.040 -you can contact me I'm shosheen on Emacs - -0:15:17.519,0:15:23.680 -in irc and on sourcehut you can email me - -0:15:21.040,0:15:26.800 -grant at charles world personal or grant - -0:15:23.680,0:15:28.320 -on a bridge software all right now let's - -0:15:26.800,0:15:32.000 -see - -0:15:28.320,0:15:32.000 -about this - -0:15:32.079,0:15:35.120 -this is up online so if you want to - -0:15:33.680,0:15:39.199 -listen to my - -0:15:35.120,0:15:43.040 -college band's album from 20 years ago - -0:15:39.199,0:15:47.680 -here it is cassiopeia basement days - -0:15:43.040,0:15:48.000 -whoops I made this art in krita you can - -0:15:47.680,0:15:51.199 -press - -0:15:48.000,0:15:55.040 -play you can skip around - -0:15:51.199,0:15:58.560 -I did I do have the playlist up here too - -0:15:55.040,0:16:00.880 -so yeah thanks for listening - -0:15:58.560,0:16:04.000 -I hope you enjoyed it and enjoy the rest - -0:16:00.880,0:16:04.000 -of EmacsConf - -0:16:04.360,0:16:07.360 -goodbye - diff --git a/2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux.vtt b/2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux.vtt new file mode 100644 index 00000000..dff7fcb0 --- /dev/null +++ b/2020/subtitles/emacsconf-2020--05-bard-bivoumacs-building-a-bandcamp-like-page-for-an-album-of-music--grant-shangreaux.vtt @@ -0,0 +1,1141 @@ +WEBVTT + +00:00:01.360 --> 00:00:04.480 +Hello, my name is Grant Shangreaux. + +00:00:04.480 --> 00:00:07.279 +This is my talk titled Bard Bivou(m)acs: + +00:00:07.279 --> 00:00:07.919 +Publishing Music + +00:00:07.919 --> 00:00:10.719 +with Emacs. I'm a software + +00:00:10.719 --> 00:00:12.799 +developer with Unabridged Software in + +00:00:12.799 --> 00:00:14.400 +Lincoln, Nebraska. + +00:00:14.400 --> 00:00:16.800 +Long time Emacs user, relatively new + +00:00:16.800 --> 00:00:18.720 +Emacs hacker. + +00:00:18.720 --> 00:00:20.480 +Hopefully, I'll be able to show + +00:00:20.480 --> 00:00:22.960 +you my workflow, with + +00:00:22.960 --> 00:00:30.480 +how I publish music with Emacs. + +00:00:30.480 --> 00:00:33.440 +All right. So as a musician, I would like + +00:00:33.440 --> 00:00:35.520 +to publish my music online. + +00:00:35.520 --> 00:00:37.200 +I could publish with popular + +00:00:37.200 --> 00:00:39.040 +online music services, + +00:00:39.040 --> 00:00:42.000 +but I'm more of a DIY-type, so I chose to + +00:00:42.000 --> 00:00:44.719 +go ahead and publish with Emacs. + +00:00:44.719 --> 00:00:48.160 +What's the motivation behind this? + +00:00:48.160 --> 00:00:49.760 +A lot of it comes down to some + +00:00:49.760 --> 00:00:51.600 +fundamental freedoms + +00:00:51.600 --> 00:00:54.960 +that Emacs and GNU software + +00:00:54.960 --> 00:00:59.120 +represent to me, as well as my + +00:00:59.120 --> 00:01:01.840 +ideas on culture and my background. + +00:01:01.840 --> 00:01:04.080 +I don't believe that music is a consumer good. + +00:01:04.080 --> 00:01:06.080 +It's a form of knowledge, + +00:01:06.080 --> 00:01:08.320 +like an algorithm. + +00:01:08.320 --> 00:01:10.479 +And it's just such a part of + +00:01:10.479 --> 00:01:13.119 +culture, like in tribal cultures, music + +00:01:13.119 --> 00:01:16.640 +was seen as a gift from the cosmos or + +00:01:16.640 --> 00:01:18.000 +the gods. It was + +00:01:18.000 --> 00:01:19.920 +a gift maybe through an individual + +00:01:19.920 --> 00:01:21.920 +vessel, but was shared with the people + +00:01:21.920 --> 00:01:23.520 +and shared with everyone, + +00:01:23.520 --> 00:01:26.799 +kept alive by the culture itself. + +00:01:26.799 --> 00:01:29.840 +So to me, music is something that + +00:01:29.840 --> 00:01:31.520 +should be shared and should be + +00:01:31.520 --> 00:01:34.640 +freely enjoyed by everyone. Of course, + +00:01:34.640 --> 00:01:36.560 +artists should be compensated as well, + +00:01:36.560 --> 00:01:39.040 +but that's a whole different topic. + +00:01:39.040 --> 00:01:41.040 +So when I want to share my music, + +00:01:41.040 --> 00:01:42.720 +I want to do it without impacting + +00:01:42.720 --> 00:01:43.520 +anyone's freedom. + +00:01:43.520 --> 00:01:45.680 +Using GNU software like Emacs is a + +00:01:45.680 --> 00:01:49.200 +good way that I can ensure that + +00:01:49.200 --> 00:01:52.840 +I won't be requiring people to + +00:01:52.840 --> 00:01:55.840 +sign away their freedoms for anything. + +00:01:55.840 --> 00:01:57.119 +There's a lot more I could say about + +00:01:57.119 --> 00:01:58.799 +this but I don't have time. + +00:01:58.799 --> 00:02:03.439 +Feel free to reach out to me by email or IRC. + +00:02:03.439 --> 00:02:06.479 +Part of the motivation for me, + +00:02:06.479 --> 00:02:08.239 +personally, is that Emacs is super + +00:02:08.239 --> 00:02:10.720 +magical. It's an all-in-one solution. + +00:02:10.720 --> 00:02:12.720 +Like I said, the GNU software aligns with + +00:02:12.720 --> 00:02:14.480 +Creative Commons' ideas. + +00:02:14.480 --> 00:02:16.800 +I can do file management. I can author + +00:02:16.800 --> 00:02:18.879 +HTML, all the web stuff I need even, + +00:02:18.879 --> 00:02:20.239 +literate-style. + +00:02:20.239 --> 00:02:22.640 +I can handle media and metadata. I've got + +00:02:22.640 --> 00:02:24.640 +version control, remote server access... + +00:02:24.640 --> 00:02:26.800 +All the tools I need are right under my + +00:02:26.800 --> 00:02:28.080 +fingertips with this tool + +00:02:28.080 --> 00:02:30.000 +that I use every day for a long time. + +00:02:30.000 --> 00:02:31.440 +I don't need to look elsewhere. + +00:02:31.440 --> 00:02:34.319 +It was a challenge. + +00:02:34.319 --> 00:02:36.319 +I wanted to see if I could do this + +00:02:36.319 --> 00:02:39.440 +all within Emacs itself. + +00:02:39.440 --> 00:02:41.680 +So, how do you use Emacs to publish music? + +00:02:41.680 --> 00:02:43.440 +Well, for me, I needed + +00:02:43.440 --> 00:02:45.120 +a couple of things. I needed to be able + +00:02:45.120 --> 00:02:46.480 +to audition and label + +00:02:46.480 --> 00:02:48.319 +unlabeled audio tracks. I have a lot of + +00:02:48.319 --> 00:02:50.000 +files that I don't know where they + +00:02:50.000 --> 00:02:51.280 +came from. I don't know what they are. I + +00:02:51.280 --> 00:02:53.840 +need to be able to listen to them, + +00:02:53.840 --> 00:02:56.800 +and I need to be able to add metadata to + +00:02:56.800 --> 00:02:58.480 +whatever audio format it is + +00:02:58.480 --> 00:03:00.800 +and rename the files based on that + +00:03:00.800 --> 00:03:03.200 +metadata, potentially. + +00:03:03.200 --> 00:03:05.120 +And in the end, I wanted to take those + +00:03:05.120 --> 00:03:08.319 +files and programmatically produce a web page + +00:03:08.319 --> 00:03:11.920 +for people to consume. I found out that + +00:03:11.920 --> 00:03:14.879 +Emacs scores a hundred percent on all of + +00:03:14.879 --> 00:03:18.000 +these requirements that I had for this, and + +00:03:18.000 --> 00:03:20.720 +a lot of that came from EMMS, the Emacs + +00:03:20.720 --> 00:03:22.640 +multimedia system. + +00:03:22.640 --> 00:03:26.080 +EMMS is great. + +00:03:26.080 --> 00:03:27.760 +If you haven't checked it out, please do. + +00:03:27.760 --> 00:03:30.000 +It's a little bit unintuitive, but + +00:03:30.000 --> 00:03:34.000 +once you get into it, you know it works. + +00:03:34.000 --> 00:03:36.640 +Basically, what EMMS gave me was the + +00:03:36.640 --> 00:03:38.720 +ability to listen to the tracks, + +00:03:38.720 --> 00:03:39.680 +organize playlists. + +00:03:39.680 --> 00:03:41.280 +On top of that, it gave me + +00:03:41.280 --> 00:03:42.959 +super-powered metadata authoring. + +00:03:42.959 --> 00:03:45.040 +I'm going to demonstrate that to you. + +00:03:45.040 --> 00:03:47.200 +So in order to do this, + +00:03:47.200 --> 00:03:50.879 +you have to require markable playlists, + +00:03:50.879 --> 00:03:54.879 +so (require 'emms-mark). I'm going to + +00:03:54.879 --> 00:03:59.680 +go through, and I'm going to open the red... + +00:03:59.680 --> 00:04:02.319 +I've got this. These files here. So + +00:04:02.319 --> 00:04:04.480 +you can see these files are mp3s. + +00:04:04.480 --> 00:04:06.080 +They're recorded on a + +00:04:06.080 --> 00:04:07.599 +digital recorder. + +00:04:07.599 --> 00:04:09.920 +If I had the choice, I would have a + +00:04:09.920 --> 00:04:12.319 +recorder that used a different format, + +00:04:12.319 --> 00:04:14.640 +but so be it. I can mark all these files + +00:04:14.640 --> 00:04:16.160 +and I can do EMMS + +00:04:16.160 --> 00:04:20.000 +add to .., and now they've been loaded + +00:04:20.000 --> 00:04:27.040 +into a playlist. + +00:04:27.040 --> 00:04:29.040 +So you can see the playlist here. There's + +00:04:29.040 --> 00:04:30.400 +some leftover files. + +00:04:30.400 --> 00:04:32.000 +So I've got these three files in my + +00:04:32.000 --> 00:04:33.759 +playlist, and as you can see, it's just + +00:04:33.759 --> 00:04:34.639 +the file name, + +00:04:34.639 --> 00:04:36.800 +the path. I don't have any metadata + +00:04:36.800 --> 00:04:38.560 +associated with them. + +00:04:38.560 --> 00:04:41.360 +In this playlist, I can hit E, + +00:04:41.360 --> 00:04:43.440 +and it'll bring up a buffer showing + +00:04:43.440 --> 00:04:47.360 +the tag information that I have. + +00:04:47.360 --> 00:04:49.840 +I could edit these here. + +00:04:49.840 --> 00:04:51.520 +I could edit them one at a time, but that's + +00:04:51.520 --> 00:04:53.919 +not really great. I want superpower + +00:04:53.919 --> 00:05:04.479 +metadata authoring. So, + +00:05:04.479 --> 00:05:07.680 +by marking them, I can then hit E, and I + +00:05:07.680 --> 00:05:10.479 +have all three of the tracks loaded up in + +00:05:10.479 --> 00:05:12.639 +this tags buffer. + +00:05:12.639 --> 00:05:15.759 +On top of that, I can do EMMS + +00:05:15.759 --> 00:05:18.800 +tag editor, set all, C-c C-r, + +00:05:18.800 --> 00:05:22.840 +and I want to set the artist. + +00:05:22.840 --> 00:05:25.680 +so these are some recordings of my + +00:05:25.680 --> 00:05:26.320 +family. + +00:05:26.320 --> 00:05:31.039 +So, Shangreaux, set all three of them. + +00:05:31.039 --> 00:05:35.600 +I want to set the album: + +00:05:35.600 --> 00:05:40.160 +Spring Walk with Lap Harp. + +00:05:40.160 --> 00:05:45.520 +I want to set the year. + +00:05:45.520 --> 00:05:48.960 +And then I'm going to go ahead and put + +00:05:48.960 --> 00:05:53.759 +these in manually, + +00:05:53.759 --> 00:05:55.840 +but with the power of Emacs keyboard + +00:05:55.840 --> 00:05:57.039 +macros and + +00:05:57.039 --> 00:05:59.600 +registers and so on. I could do this + +00:05:59.600 --> 00:06:02.319 +programmatically as well, + +00:06:02.319 --> 00:06:04.000 +which would make it a lot easier if I + +00:06:04.000 --> 00:06:06.000 +had much more than three files to + +00:06:06.000 --> 00:06:07.440 +do this with. + +00:06:07.440 --> 00:06:09.919 +Submit the changes with C-c C-c, + +00:06:09.919 --> 00:06:11.520 +and now we've got the playlist. You can + +00:06:11.520 --> 00:06:13.120 +see the artist and track number have + +00:06:13.120 --> 00:06:15.039 +been updated here. + +00:06:15.039 --> 00:06:17.360 +And then the final piece of this is that + +00:06:17.360 --> 00:06:19.039 +if you look at this, you can see that the + +00:06:19.039 --> 00:06:20.479 +file name is still the same. + +00:06:20.479 --> 00:06:22.639 +So if I were looking at the directory, + +00:06:22.639 --> 00:06:24.560 +I would still have this file name. + +00:06:24.560 --> 00:06:26.479 +When packaging these up for a release, + +00:06:26.479 --> 00:06:28.000 +for people to download, + +00:06:28.000 --> 00:06:30.319 +it's nice to be able to have that + +00:06:30.319 --> 00:06:32.400 +filename reflect the track number and the + +00:06:32.400 --> 00:06:34.800 +artist and so on. So there's another + +00:06:34.800 --> 00:06:41.199 +command, EMMS + +00:06:41.199 --> 00:06:44.160 +rename tag editor, rename, so it could be + +00:06:44.160 --> 00:06:45.120 +just capital R. + +00:06:45.120 --> 00:06:47.199 +I think I need to mark all of these, hit + +00:06:47.199 --> 00:06:48.880 +capital R, and then it's going to ask me + +00:06:48.880 --> 00:06:50.000 +to confirm + +00:06:50.000 --> 00:06:54.400 +and say yes to all of them. + +00:06:54.400 --> 00:07:02.720 +And now, if you look in the-- + +00:07:02.720 --> 00:07:04.319 +whoops I have to update it--you'll see + +00:07:04.319 --> 00:07:06.319 +it's been updated with the artist, + +00:07:06.319 --> 00:07:09.840 +track number and + +00:07:09.840 --> 00:07:11.120 +track name. + +00:07:11.120 --> 00:07:14.639 +This format is a format string, so + +00:07:14.639 --> 00:07:17.360 +it's customizable of course. + +00:07:17.360 --> 00:07:21.039 +I just decided to go with the default. + +00:07:21.039 --> 00:07:24.160 +So that's pretty great, this workflow + +00:07:24.160 --> 00:07:26.000 +just with EMMS. I didn't have to do + +00:07:26.000 --> 00:07:28.080 +anything. This is all there. It's all + +00:07:28.080 --> 00:07:30.960 +built in. It gave me exactly what + +00:07:30.960 --> 00:07:32.639 +I was looking for in terms of being able + +00:07:32.639 --> 00:07:35.599 +to process a lot of raw audio files + +00:07:35.599 --> 00:07:37.599 +add metadata to them and get them ready + +00:07:37.599 --> 00:07:39.280 +for publishing. + +00:07:39.280 --> 00:07:41.599 +And this is for publishing for playback + +00:07:41.599 --> 00:07:43.520 +in any media player. It'll be + +00:07:43.520 --> 00:07:46.560 +useful. Not just for the web page that I'm + +00:07:46.560 --> 00:07:48.479 +building. So the + +00:07:48.479 --> 00:07:50.560 +final part, of course, is to build the + +00:07:50.560 --> 00:07:54.960 +web page. Emacs makes authoring HTML trivial. + +00:07:54.960 --> 00:07:57.440 +As I was going through this, I + +00:07:57.440 --> 00:07:59.039 +wanted to challenge myself and just be, + +00:07:59.039 --> 00:08:00.400 +like, can I do this + +00:08:00.400 --> 00:08:03.520 +just all with Emacs? Can I just make this? + +00:08:03.520 --> 00:08:05.440 +I don't need a... I don't need Ruby. I don't + +00:08:05.440 --> 00:08:07.039 +need Rails. I don't need Node. I don't + +00:08:07.039 --> 00:08:08.960 +need any of this other stuff. I have my + +00:08:08.960 --> 00:08:10.560 +tool right here. It's a fully... + +00:08:10.560 --> 00:08:12.560 +It's a whole operating system, basically, + +00:08:12.560 --> 00:08:15.039 +plus programming languages. + +00:08:15.039 --> 00:08:17.360 +So the first thing I started with was + +00:08:17.360 --> 00:08:19.919 +buffer scripting for manipulating text. + +00:08:19.919 --> 00:08:22.560 +That's kind of the easiest way to do it. + +00:08:22.560 --> 00:08:24.319 +Basically, anything you can do in a + +00:08:24.319 --> 00:08:25.280 +buffer, you can do + +00:08:25.280 --> 00:08:28.479 +programmatically with Elisp. So this + +00:08:28.479 --> 00:08:30.319 +might be a good example for beginners. If + +00:08:30.319 --> 00:08:33.919 +you haven't done any Elisp yet, + +00:08:33.919 --> 00:08:36.000 +a simple example is to create this + +00:08:36.000 --> 00:08:36.959 +this div + +00:08:36.959 --> 00:08:40.000 +output here. You + +00:08:40.000 --> 00:08:41.760 +can use this with-temp-buffer, so + +00:08:41.760 --> 00:08:44.240 +basically creating an imaginary buffer. + +00:08:44.240 --> 00:08:46.640 +insert is just like typing, so you put + +00:08:46.640 --> 00:08:48.800 +strings in, you put new lines in, + +00:08:48.800 --> 00:08:50.959 +you can build some strings together. + +00:08:50.959 --> 00:08:52.080 +Here you can see + +00:08:52.080 --> 00:08:54.000 +I'm doing a random number, so every time + +00:08:54.000 --> 00:08:55.360 +I execute this, + +00:08:55.360 --> 00:08:57.920 +my content change,s so I can generate + +00:08:57.920 --> 00:09:01.040 +dynamic content in HTML blocks + +00:09:01.040 --> 00:09:04.399 +with Elisp. For my + +00:09:04.399 --> 00:09:05.920 +web page builder, It's a little more + +00:09:05.920 --> 00:09:08.000 +complex. I'm pulling data out + +00:09:08.000 --> 00:09:12.080 +using EMMS data structures, + +00:09:12.080 --> 00:09:16.080 +so it's pulling that out from the track data. + +00:09:16.080 --> 00:09:19.440 +And then I'm using some program to + +00:09:19.440 --> 00:09:21.440 +generate list elements, so each track is + +00:09:21.440 --> 00:09:23.200 +going to have the title + +00:09:23.200 --> 00:09:25.120 +and track number, and then a button for + +00:09:25.120 --> 00:09:26.959 +playing it, plus the source + +00:09:26.959 --> 00:09:29.519 +of the audio file, which will get added + +00:09:29.519 --> 00:09:30.480 +here. + +00:09:30.480 --> 00:09:32.640 +Right now, this is hard coded for Opus, so + +00:09:32.640 --> 00:09:37.200 +it won't work for my MP3s. + +00:09:37.200 --> 00:09:39.120 +I'm going to skip over snippets. Turns + +00:09:39.120 --> 00:09:41.200 +out format strings were good enough + +00:09:41.200 --> 00:09:45.519 +for me. Snippets could be useful, but + +00:09:45.519 --> 00:09:48.160 +format is super powerful, and I didn't + +00:09:48.160 --> 00:09:49.839 +really even need all that much power, + +00:09:49.839 --> 00:09:51.279 +basically, just doing string + +00:09:51.279 --> 00:09:53.519 +interpolation. So if you haven't seen + +00:09:53.519 --> 00:09:54.560 +format before, + +00:09:54.560 --> 00:09:56.720 +you basically put these control strings + +00:09:56.720 --> 00:09:59.120 +or control characters inside of a string, + +00:09:59.120 --> 00:10:03.120 +and you can generate an + +00:10:03.120 --> 00:10:05.040 +output string that you want. + +00:10:05.040 --> 00:10:07.600 +So in my generator code, basically, it's + +00:10:07.600 --> 00:10:08.720 +down here, + +00:10:08.720 --> 00:10:10.959 +I'm calling format with this Bard + +00:10:10.959 --> 00:10:12.800 +Bivou(m)acs template, + +00:10:12.800 --> 00:10:15.920 +and that's basically a big + +00:10:15.920 --> 00:10:18.240 +a big string of HTML. It's just + +00:10:18.240 --> 00:10:21.200 +my whole page of HTML + +00:10:21.200 --> 00:10:22.959 +with those control characters in just + +00:10:22.959 --> 00:10:24.399 +four places. + +00:10:24.399 --> 00:10:26.399 +One of them populates the track list. + +00:10:26.399 --> 00:10:29.760 +That's really the meat of the program. + +00:10:29.760 --> 00:10:32.079 +Again, this is a combination of using + +00:10:32.079 --> 00:10:33.440 +buffer scripting, + +00:10:33.440 --> 00:10:37.279 +using HTML mode, inserting text format strings, + +00:10:37.279 --> 00:10:40.000 +and then I can indent-region so the HTML + +00:10:40.000 --> 00:10:41.920 +actually looks pretty + +00:10:41.920 --> 00:10:45.200 +when it comes out of it as well. + +00:10:45.200 --> 00:10:50.160 +I will show that, just really quick + +00:10:50.160 --> 00:10:54.000 +actually. + +00:10:54.000 --> 00:10:56.880 +So you can see, this is the HTML that got + +00:10:56.880 --> 00:10:58.800 +generated. I've got my template. + +00:10:58.800 --> 00:11:02.560 +I inserted the title here, the style, the + +00:11:02.560 --> 00:11:05.760 +font was all inserted, + +00:11:05.760 --> 00:11:07.920 +and then this whole list of of tracks here. + +00:11:07.920 --> 00:11:11.200 +It's kind of messy to look at, + +00:11:11.200 --> 00:11:14.399 +but this track list, this whole div here, + +00:11:14.399 --> 00:11:15.920 +is all generated by + +00:11:15.920 --> 00:11:22.480 +my generator code, and it works. It's great. + +00:11:22.480 --> 00:11:27.120 +Okay, moving on. + +00:11:27.120 --> 00:11:30.240 +So the other thing was that as I was + +00:11:30.240 --> 00:11:32.079 +developing this, I decided to use + +00:11:32.079 --> 00:11:33.200 +Org Babel and some of his + +00:11:33.200 --> 00:11:35.360 +its features for multi-language + +00:11:35.360 --> 00:11:36.880 +things because I needed to style it with + +00:11:36.880 --> 00:11:37.839 +CSS and + +00:11:37.839 --> 00:11:40.480 +and put actions in Javascript, and also I + +00:11:40.480 --> 00:11:42.480 +used SVG for authoring stuff. + +00:11:42.480 --> 00:11:46.079 +It was a little bit complicated. + +00:11:46.079 --> 00:11:47.680 +It probably would have been simpler had I + +00:11:47.680 --> 00:11:49.600 +not used Org Babel, but it's also really + +00:11:49.600 --> 00:11:51.440 +fun. I think it's a cool, + +00:11:51.440 --> 00:11:53.839 +cool idea to use literate programming. My + +00:11:53.839 --> 00:11:55.839 +idea was to create HTML + +00:11:55.839 --> 00:11:59.519 +components. I could name it like this, + +00:11:59.519 --> 00:12:01.440 +put a format string inside it, and build + +00:12:01.440 --> 00:12:02.800 +a function + +00:12:02.800 --> 00:12:05.519 +in Elisp to format it and spit out the + +00:12:05.519 --> 00:12:07.120 +HTML that I want. + +00:12:07.120 --> 00:12:10.320 +By doing this, then, I can + +00:12:10.320 --> 00:12:12.880 +just change things in my Org file which, + +00:12:12.880 --> 00:12:14.320 +not getting a whole lot of time to work + +00:12:14.320 --> 00:12:16.959 +on it, I can come back to it and + +00:12:16.959 --> 00:12:19.839 +I have a lot of notes. I can + +00:12:19.839 --> 00:12:21.920 +kind of generate things as I'm going and + +00:12:21.920 --> 00:12:24.399 +keep notes for myself, and keep the... + +00:12:24.399 --> 00:12:25.600 +I don't know. It's cool. Literate + +00:12:25.600 --> 00:12:27.519 +programming is fun. So I don't need to + +00:12:27.519 --> 00:12:29.279 +go into that too much, but you can see if + +00:12:29.279 --> 00:12:31.040 +I execute this here, + +00:12:31.040 --> 00:12:33.360 +I get the the div that I want. It's a + +00:12:33.360 --> 00:12:34.880 +little bit funny. You'll see I have the + +00:12:34.880 --> 00:12:36.480 +string like this, the way that + +00:12:36.480 --> 00:12:39.200 +noweb expands, I can't do this on a + +00:12:39.200 --> 00:12:40.000 +single line. + +00:12:40.000 --> 00:12:43.839 +It looks funny when you do that, + +00:12:43.839 --> 00:12:45.440 +so that might be something to work out + +00:12:45.440 --> 00:12:48.959 +later. CSS blocks can either be tangled out + +00:12:48.959 --> 00:12:52.639 +and referenced in the HTML source or inlined. + +00:12:52.639 --> 00:12:54.639 +Here's an example I have of inlining it. + +00:12:54.639 --> 00:12:56.959 +So I've got my little CSS block named + +00:12:56.959 --> 00:13:00.320 +style, Javascript named script, + +00:13:00.320 --> 00:13:03.040 +and then I've got this HTML source block + +00:13:03.040 --> 00:13:04.839 +with noweb expansion. + +00:13:04.839 --> 00:13:07.920 +These double angle brackets here + +00:13:07.920 --> 00:13:09.839 +are where I'm going to expand the block + +00:13:09.839 --> 00:13:12.639 +named style. I'm actually calling a function, + +00:13:12.639 --> 00:13:14.399 +so I want the result of the function + +00:13:14.399 --> 00:13:17.040 +here, and then the script will just get + +00:13:17.040 --> 00:13:22.959 +expanded here. So org-babel-expand-src-block, + +00:13:22.959 --> 00:13:25.360 +you can see what it looks like. + +00:13:25.360 --> 00:13:28.160 +I've got my style here. I've got my title. + +00:13:28.160 --> 00:13:29.920 +I've got that main content class + +00:13:29.920 --> 00:13:31.279 +I showed before, + +00:13:31.279 --> 00:13:34.480 +and the script as well. So that's kind of cool. + +00:13:34.480 --> 00:13:36.320 +I could just run org-babel-tangle and + +00:13:36.320 --> 00:13:38.160 +get my thing out and just + +00:13:38.160 --> 00:13:40.480 +edit one file instead of multiple files. + +00:13:40.480 --> 00:13:41.600 +Not for everyone, + +00:13:41.600 --> 00:13:45.839 +but I thought it was kind of fun. + +00:13:45.839 --> 00:13:47.760 +All right. Oh, and the final thing is that + +00:13:47.760 --> 00:13:49.199 +in Emacs, you can + +00:13:49.199 --> 00:13:52.880 +author and view SVG. So this is just an + +00:13:52.880 --> 00:13:57.199 +Org. This SVG, I used to make the play + +00:13:57.199 --> 00:13:59.519 +and pause buttons. I didn't know this, + +00:13:59.519 --> 00:14:02.800 +but if you edit an SVG file, you can + +00:14:02.800 --> 00:14:08.800 +toggle back and forth + +00:14:08.800 --> 00:14:13.199 +between the code and the image. + +00:14:13.199 --> 00:14:17.360 +It's pretty sweet. So I can iteratively + +00:14:17.360 --> 00:14:19.680 +work through this because of how + +00:14:19.680 --> 00:14:20.560 +Emacs is. + +00:14:20.560 --> 00:14:24.959 +Final considerations here, + +00:14:24.959 --> 00:14:27.360 +like when doing this, I want it to be all + +00:14:27.360 --> 00:14:29.279 +free, so I want to use fonts that use a + +00:14:29.279 --> 00:14:30.079 +free license. + +00:14:30.079 --> 00:14:32.800 +I found GNU Unifont. It's kind of cool. + +00:14:32.800 --> 00:14:34.800 +The content license... I chose + +00:14:34.800 --> 00:14:37.600 +Creative Commons Attribution ShareAlike, + +00:14:37.600 --> 00:14:39.920 +which is kind of like the GPL. + +00:14:39.920 --> 00:14:42.880 +Ideally, I could serve it with Emacs. I'd + +00:14:42.880 --> 00:14:44.800 +like to remove idiosyncrasy so other + +00:14:44.800 --> 00:14:46.320 +people can use it. + +00:14:46.320 --> 00:14:48.720 +It's pretty much just my tool right now. + +00:14:48.720 --> 00:14:51.040 +Not requiring the web browser... I can + +00:14:51.040 --> 00:14:54.079 +ship playlists so that you can just + +00:14:54.079 --> 00:14:58.000 +click or link to a playlist on your favorite + +00:14:58.000 --> 00:15:00.639 +player, even EMMS if you want, and then + +00:15:00.639 --> 00:15:02.639 +packing up those albums in like a ZIP or + +00:15:02.639 --> 00:15:04.320 +.tar file. + +00:15:04.320 --> 00:15:08.639 +So you can go to churls.world . + +00:15:08.639 --> 00:15:10.880 +It just has a link to this album. I'll + +00:15:10.880 --> 00:15:14.000 +display it here in just a second. + +00:15:14.000 --> 00:15:17.519 +You can contact me. I'm shoshin on #emacs + +00:15:17.519 --> 00:15:21.040 +in IRC and on sourcehut. You can email me + +00:15:21.040 --> 00:15:23.680 +grant@churls.world, personal, or + +00:15:23.680 --> 00:15:26.800 +grant@unabridgedsoftware.com. All right, now. + +00:15:26.800 --> 00:15:32.079 +Let's see about this... + +00:15:32.079 --> 00:15:33.680 +This is up online, so if you want to + +00:15:33.680 --> 00:15:35.120 +listen to my + +00:15:35.120 --> 00:15:39.199 +college band's album from 20 years ago, + +00:15:39.199 --> 00:15:43.040 +here it is: Cassiopeia Basement Days. + +00:15:43.040 --> 00:15:47.680 +Whoops. I made this art in Krita. You can + +00:15:47.680 --> 00:15:51.199 +press play. You can skip around. + +00:15:51.199 --> 00:15:55.040 +I do have the playlist up here too. + +00:15:55.040 --> 00:15:58.560 +So yeah, thanks for listening. + +00:15:58.560 --> 00:16:00.880 +I hope you enjoyed it, and enjoy the rest + +00:16:00.880 --> 00:16:07.360 +of EmacsConf. Goodbye! |