WEBVTT 00:00.000 --> 00:14.000 Okay, hello everybody, well I thought this new music room was going to be a small room somewhere 00:14.000 --> 00:22.000 in the back completely empty, but turns out it's quite a big room, that's nice, I'm not nervous at all. 00:22.000 --> 00:26.000 So this talk is going to be about one of my hobbies, my job is to work for an outlet where 00:26.000 --> 00:32.720 we fund open source, so have a look at that, this was a nice plug, but in my hobby I also like to write 00:32.720 --> 00:38.240 code and I like to make music. If you combine those things, well you're wasting your time on writing 00:38.240 --> 00:44.800 apps to read music, and that's what I've been doing and I'm going to talk about that. So just to make 00:44.800 --> 00:52.400 sure, I mean I saw a lot of people, wow, this is interesting. A lot of talks here as about using 00:52.480 --> 00:59.120 your computer to make music, but what I like to do is make music with other humans, and here's a group 00:59.120 --> 01:07.760 of them now and then, and wow, they're really glitching. I think it's because of the shirts they're 01:07.760 --> 01:16.800 ready. So yeah, this is a big band, and before I start, I would like to say a few things about 01:17.600 --> 01:26.640 a big band. It consists of wind instruments, you have trumpets, trumpets, saxophones, and a rhythm 01:26.640 --> 01:34.240 section to play this music in a group, you need some kind of coordination, right? You need to start 01:34.240 --> 01:42.480 at the same time, you need to end at the same time, preferably play at the same speed, but you also need 01:42.560 --> 01:47.680 to have a coordination about the volume. The equalizer, as you will, was in front, that's the 01:47.680 --> 01:55.040 conductor, and he determines who is loudest or less loud, because the melody should be louder, 01:55.920 --> 02:02.400 sometimes the melody is in trumpets, sometimes in the saxophones, and on a lead day it's with 02:02.400 --> 02:10.720 the trumpones. Yeah, I play in two big bands, this one has fancy costumes, the other one is plain 02:10.800 --> 02:22.800 clothes. Okay, let's continue. Oh, no. Oh boy, the screen is really little at me down. 02:32.240 --> 02:36.800 Yeah, I'm going to set my monot, it's on performance now, that doesn't really help. 02:37.200 --> 02:57.440 And disconnecting it, waiting, maybe somebody has a computer, I uploaded this slide, so I 02:57.520 --> 03:06.720 could just download them from the webpage, if I can borrow it. Yeah, sorry about that. 03:09.920 --> 03:15.440 You have them open already? No, not yet. No webpage. Yeah, if you. 03:28.400 --> 03:29.440 Shh. 03:41.040 --> 03:43.040 Can be Jason? 03:43.040 --> 03:45.040 Yeah, I'll give him an offer. 03:57.440 --> 04:24.160 Oh, yeah, have you a little offers? No, no, little offers. Well, then I'm going to do it from PDF, which will not be a school, but 04:27.440 --> 04:33.760 doing it or doing it just set it up, it doesn't really matter. Okay, and now presentation mode, 04:33.760 --> 04:35.760 this thing, this question. 04:49.760 --> 04:54.880 Anyway, what are we seeing? The most, the largest part of this presentation will be about sheet music, 04:55.840 --> 05:02.160 if you would play Trombone, like I do, then jazz piece, like this big bend place, is usually one or two pages, 05:02.160 --> 05:08.800 sometimes three or four. If you're the piano player, you have two staves, so you have a lot more pages, 05:08.800 --> 05:15.840 and if you put the conductor, you see the music from all of the instruments, so you have like 10 to 20 pages, 05:16.560 --> 05:18.560 to manage. 05:25.840 --> 05:27.840 This is all very sad. 05:40.560 --> 05:46.240 What I can do. I'm going to change the refresh frequency. 05:46.240 --> 05:55.280 Maybe, yeah, maybe, no other display, no other display. 05:59.280 --> 06:01.920 It was a projective, writing that. 06:01.920 --> 06:17.120 So, just to make sure, I'm going to disable the laptop screen, then edit each view of this 06:17.120 --> 06:21.120 mic. This is the native from the projector. 06:22.080 --> 06:36.560 Very quickly, thank you for that encouraging applause. Wow, and I only had 30 sheets. 10. 06:38.560 --> 06:45.760 So, yeah, sheet music. In the old days, people had actual paper. That's why we have this A4 format. 06:46.080 --> 06:52.400 And there's a lot of them. You had a librarian, and the librarian used to store all that. 06:52.400 --> 06:57.360 And in the paper era, there was a large archive with all the songs. Have you bind us with sheet music 06:57.360 --> 07:02.400 musicians? Only have their own score. So, if they want to see the score of somebody else, they don't have it, 07:02.400 --> 07:08.240 because they have a big binder of only those stuff. There's a lot of time lost between songs, 07:08.240 --> 07:14.480 because you have to switch and you hope that all of your band members have alphabetised the songs. 07:14.560 --> 07:18.800 Usually, they have different opinions of what the alphabet looks like exactly. 07:18.800 --> 07:25.520 So, that doesn't always work. So, distributing new songs takes a long time. You have to 07:25.520 --> 07:30.480 sort them out, give them a little bit. Number, somebody's not here, and we have to get it later. 07:30.480 --> 07:37.200 Lots of inconvenience stuff. You have to put pieces in order before performance. 07:38.240 --> 07:41.840 And then after the performance, put them back in your version of the alphabet. 07:44.480 --> 07:49.520 And if somebody substitutes it in for you, you have to coordinate how they get your binder. 07:50.800 --> 07:54.560 So, I knew of sheet music becomes messy because of all the handwriting in it. 07:55.200 --> 08:03.520 But as a bright new era, we have tablets now. Great. So, the digital era, individuals they buy tablets, 08:03.520 --> 08:09.200 and these tablets are mostly only come into operating systems. Unfortunately, both of them are closed. 08:09.840 --> 08:14.080 And there's proprietary apps for viewing sheet music, very inconvenient. 08:15.120 --> 08:21.120 The sheet music is usually put on a cloud drive and people have to get their own parts out of a big PDF. 08:21.920 --> 08:27.440 And annotations are stored on the devices. So, there's a dependency of big tech. That's not nice. 08:28.320 --> 08:33.440 Most use tablets are closed. The apps need to be approved. If you're writing one, 08:33.520 --> 08:39.280 the app store revenue model leads to decent apps initially, but eventually there's a lock-in and 08:39.280 --> 08:47.200 sheetification. So, that, to me, it also feels bad to use, right? So, this tablet is a third device for me. 08:47.200 --> 08:52.000 I usually have a laptop, a mobile phone, to have enough getting operator systems that are open on 08:52.000 --> 08:57.840 there, but for the tablet there's a new problem. However, I have a creative solution. I just 08:58.720 --> 09:06.000 topple the laptop. Great. However, I also have a second-hand iPad because, you know, most 09:06.000 --> 09:10.320 musicians they just buy iPads or Android tablets. So, I can test this software and present them today. 09:12.080 --> 09:17.840 But I need a better digital era. I want to self-host this app and it should be independent of the 09:17.840 --> 09:25.200 operating system and the notes should be shared. So, let's write an app. I'm going to skip this 09:25.280 --> 09:32.880 because I'm late. It requires, so I want to have a way to rehearse with recordings. That's a bit 09:32.880 --> 09:40.320 out of the scope now and it should be a very good archive. It should also be a sheet reader, 09:40.320 --> 09:45.040 but that's optimal because most people have their own sheet reader software. However, I like to use my own, 09:45.040 --> 09:50.080 even though it's not yet as good as the commercial offerings. It's going to be built as a progressive 09:50.160 --> 09:56.560 web app that means it's just running on a server and you can say, add this to my desktop on iOS 09:56.560 --> 10:02.000 and Android and it looks like a normal app. You have local storage which is great because then also, 10:02.000 --> 10:05.280 if you're playing in the park, there's no Wi-Fi, you have your sheet music still. 10:07.280 --> 10:14.080 Oh, yeah. A small thanks to all the, what's this? Am I? 10:14.080 --> 10:21.760 Okay, one button needs to go back a bit. I would like to thank all the people that write the 10:21.760 --> 10:28.080 rest of this deck, because there's so many libraries in here. It's amazing how much 10:29.280 --> 10:36.000 software that they're on the internet that you can reuse. So, a progressive web app, if you want to 10:36.000 --> 10:40.880 look up the benefits you can do that later, I'm not going to skip that now. The server side is no 10:40.960 --> 10:46.400 address, not particularly interesting. And yeah, so the initial reason to write this app is I wanted 10:46.400 --> 10:51.760 to rehearse with recordings. Sometimes you have a piece and need to moment layer where lucky 10:51.760 --> 10:55.760 if you get a nice piece of melody in the middle somewhere, but then you want to look that so that 10:55.760 --> 11:00.560 you can play along while you're rehearsing. That's inconvenient in a normal music player, so I wrote 11:00.560 --> 11:05.840 an initial app for that and I'm going to show you what that looked like in a minute. So here's the 11:05.840 --> 11:10.960 overview of the app that's, in this case, for three bands in that, the Brussels Jazz Orchestra 11:10.960 --> 11:16.160 is not somewhere I'm often invited to join, but real Brussels, so I thought let's add them. 11:18.720 --> 11:24.080 When you click on one of the bands, you see the agenda, the playlist arrangements and recordings 11:24.080 --> 11:30.880 and recent pieces that you have read on this thing, so you can quickly go back to songs that you 11:30.960 --> 11:37.120 have been rehearsing. So you can upload audio that you get a list of all the recordings in there 11:37.120 --> 11:42.960 and then the cool thing is, I'm going to not try to demo it because it's crossed here. 11:43.840 --> 11:50.480 But what you can do is, at certain times, this is a time bar, you just say this is measure five, 11:50.480 --> 11:58.480 measure 21, 37, and then here with big thumbs you can click on these buttons to loop, in this case, 11:58.560 --> 12:06.000 from 21 to 105. It's very simple, this was the whole app initially and turned out, 12:06.000 --> 12:11.360 somebody else during COVID, had been writing an app called Rehors with exact same functionality, 12:11.360 --> 12:22.080 but on the app store. It's really weird. Yeah, so the advantage here is that only one person 12:22.080 --> 12:26.880 has to put in these markers, it's a bit of a job and then everybody has the advantage that they 12:26.880 --> 12:36.000 can rehearse with this. So yeah, managing sheet music, what most bands have is they have 12:36.000 --> 12:41.840 a Google Drive somewhere or a next-low Drive and you download the PDF with the music for the entire 12:41.840 --> 12:48.800 piece and then from pages 42 to 46, you cut and then you upload it into your tablet and then you're 12:48.800 --> 12:56.720 done, that's very inconvenient. We want to improve that. So the best way to do this is with this app, 12:56.720 --> 13:00.960 I'm going to show you how that works. One person uploads the music, he adjusts the pages, 13:02.000 --> 13:08.720 assigns the pages to the parts, adds watermarks. We have people that compose their own music and they 13:08.720 --> 13:14.320 want it to be secure and not leak it out, so there's a bit of protection there and everybody can 13:14.320 --> 13:21.840 download their parts with a zip file or they can use the embedded viewer. So this is a list of 13:21.840 --> 13:27.040 arrangements and if you click that, you go into an arrangement as you can see that I, as a 13:27.040 --> 13:31.360 Trombone player, I can see Trombone 3, which is my part about I can also see the other Trombones 13:31.360 --> 13:35.120 if I want to have a look there and if I click this, I can listen to a recording of this song. 13:38.720 --> 13:41.680 You can edit the arrangement or what you see then, as you can input through the range 13:41.680 --> 13:49.920 of the composer who will deliver you can choose the PDF and here is a bit of interface where you 13:49.920 --> 13:56.240 can, if you upload the PDF files, you can say okay, the conductor, the pages have, do not have 13:56.240 --> 14:02.960 to be rotated and they are from page 2 to page 14 and the female vocals and so on and so on. 14:02.960 --> 14:10.720 And here you get a nice preview of which page that is. So what that leads to is that when you have 14:10.720 --> 14:16.400 a concert, you put it in the agenda and then each concert has a playlist, so that's like 20 songs 14:17.280 --> 14:22.560 here and you can just press download and you get a zip file with all of the files that you 14:22.560 --> 14:29.760 are supposed to be playing, that's concert. There's also a huge user management in there 14:29.760 --> 14:34.800 to make this possible because, obviously, you know, to know who's account has access to what 14:36.800 --> 14:43.520 and so in this case, there's a player, there's a primary player always, can be two people 14:43.600 --> 14:47.520 who can read the same parts and these are the backup players who also have access to those 14:47.520 --> 14:54.160 parts. Yeah, you can read and annotate by the way, I want to go back briefly. 14:56.640 --> 15:02.640 Oh yeah, there's also a message functionality here and that means that I can send an email, 15:02.640 --> 15:08.960 a personalized email to everybody. People that play in big bands, some big bands tend to be of age 15:09.040 --> 15:14.000 and not that good with technology, so what this does is it sends an email with a link which 15:14.000 --> 15:17.760 directly leads to a login, so they click it, they're logged in, if I post a request, not if I 15:17.760 --> 15:23.040 get request and then they click that, they logged in and then they can pass this download button, 15:23.040 --> 15:32.640 so it's made super friendly for everyone to use it. Yeah, then the last bit, so there's also 15:32.640 --> 15:38.320 the functionality to read the PDF files and to annotate them and the annotations are sent back to the 15:38.960 --> 15:42.560 server, so when a substitute comes, they have the same annotations that you have. 15:44.000 --> 15:50.720 Interestingly, there's a special music font that really helps to implement this because the 15:50.720 --> 15:55.840 numbers of the glyphs have been standardized for all the musical symbols, so that really helps, 15:55.840 --> 16:01.280 the musical symbols are in there so that you don't have to try to write a query or whatever, 16:01.280 --> 16:06.880 you can just click one, so it looks nice in a decent font. It works offline, I will be so told 16:07.600 --> 16:14.880 that the scrolling is vertical, and that's just because I'm lazy, so you have the tablets, 16:14.880 --> 16:20.160 you have two pages below each other and you scroll up like this, so if you have a bit of rest, 16:20.160 --> 16:27.760 you scroll up, put the rest on the top and below it. The commercial apps, what they do, they allow 16:27.760 --> 16:33.200 you to scroll by half a page or actually swap half a page, which is also nice, but I haven't 16:33.200 --> 16:42.000 implemented that yet, it's similar to the list. This is what this looks like, so this is two 16:42.000 --> 16:47.520 screens, first I choose that I'm from both three, and here are some annotations on the big causes 16:47.520 --> 16:51.920 to delete it again, you can choose colors, you can use glyphs which are on there or just choose 16:51.920 --> 16:59.520 a pen to annotate something. The future, yeah, I'm just going to fix the paper cuts, 17:00.480 --> 17:04.480 it needs to be working on newer devices, sometimes a very high resolution, you need to change the 17:04.480 --> 17:10.000 CSS a bit, documentation can be easier, maybe I'll make a website, and I hope this use of this 17:10.000 --> 17:17.760 app will grow organically, so just because it's really a user-facing application, which means that 17:17.760 --> 17:24.080 if a band adopts this, I would like a competent person to be responsible for helping the people 17:24.160 --> 17:28.160 that use it. Thank you, that's it. 17:44.160 --> 17:48.880 I guess you don't want to try the demo, just because we can give you some a bit more time if you 17:48.880 --> 17:54.720 want to be okay. So, in the meanwhile, I'll run miles and miles just to get to the 17:56.720 --> 18:00.560 music, whoa, what happens? I don't know if the audio will be playing. 18:03.680 --> 18:10.960 Yeah, we'll get it here, so. So, what you can do is you want to start the loop at B and to see the 18:10.960 --> 18:15.360 press here, and now it's just going to go around and around, that's just a whole demo. 18:19.280 --> 18:30.720 I'll put it a bit lower, so this video doesn't get the lead of a copyright issues. 18:32.320 --> 18:42.000 Hi. Do you have any plans for adding some kind of offering tools for PDF, so maybe you could put 18:42.080 --> 18:48.800 an ABC notation or something like that, or really fun or something like that? 18:48.800 --> 18:55.120 Yeah, so the most offering that this tool does now is cutting the pages, rotating and putting 18:55.120 --> 19:00.480 a watermark on it, and I don't plan to do more for the future, because that becomes very complicated 19:00.480 --> 19:04.320 in UI, and there's other more important things that have precedence. 19:05.120 --> 19:09.120 So, what happens when you update a PDF, the notes are still retained? 19:09.360 --> 19:14.320 No, not at the moment. No. 19:16.960 --> 19:23.200 Question is, is any of the playback state synchronized, like during a rehearsal as well, the cross-players? 19:23.200 --> 19:28.720 Can you speak a bit louder? Is any of the playback states synchronized in real-time across the 19:28.720 --> 19:34.560 different players? No, this is for practicing at home on your own. I see, so every player has to 19:34.560 --> 19:44.080 skip pages or scroll to the correct page by themselves, or yes, so the PDFs, I guess people know 19:44.080 --> 19:52.320 music or hear where you have a nice music XML, this type of band plays with scanned PDF files. 19:52.320 --> 20:00.160 That's the state of the art. Going to something like music XML would require to input all of the 20:00.240 --> 20:04.560 arrangements that we play, and that's not going to happen. Maybe if some AI tool can do it in the 20:04.560 --> 20:12.960 future, but I'm just focusing on doing PDFs well. One short question, I was interested in doing 20:12.960 --> 20:21.120 something similar for a choir as well. How difficult be to add support for MIDI files? 20:22.400 --> 20:28.240 I would suggest to convert MIDI files to MP3 or another audio format and upload them like that. 20:28.880 --> 20:34.160 It wouldn't be that hard, because for example, the PDFs have server-side rendering, so if you have 20:34.160 --> 20:39.760 a command that can be one on the server-side to convert a MIDI to a different audio file, that's fine. 20:39.760 --> 20:44.960 Unless for some reason you would want MIDI features in the front end, that's not going to happen. 20:51.920 --> 20:55.920 Hi, I was wondering whether there is a calendar function because 20:58.640 --> 21:04.160 is there a calendar function and is it collaborative? My collectors, we have a gigomatic, 21:04.160 --> 21:09.280 where you can select who is coming when and for gig planning all in one platform and there's 21:09.280 --> 21:15.600 a big convenient. The area of the Netherlands where I play, there's a big band in every village, 21:15.600 --> 21:20.480 so if you're not there for your her, so you are assumed to find a substitute for yourself, 21:21.440 --> 21:26.400 so that the band can play in full session, and there's a nice mix of getting to know each 21:26.400 --> 21:31.040 number from the other bands as well. So I'd like to add a feature, this is very high on the list, 21:31.040 --> 21:36.800 where you can say, I'm not coming the next rehearsal, send out meals to the list of 21:37.680 --> 21:45.360 substantial substitutes and they will then get added. So that would, I think, answer your question 21:45.360 --> 21:48.400 about knowing who will be there at what concert or rehearsal. 21:56.400 --> 22:05.760 First of all, thank you very much, this is brilliant. The last question is regarding user 22:05.760 --> 22:12.000 management, is there any integration with the central authentication tools such like key 22:12.000 --> 22:19.840 clothes through some or IDC or is it something for the future? So right now the thinking of the 22:20.560 --> 22:27.200 data is done over web sockets and there's no current functionality, for example, if the 22:27.200 --> 22:31.280 conductor says this is next piece, then everybody automatically gets set in front of them, 22:31.280 --> 22:36.480 that would be fairly low level to do. However, moving the pages like somebody else suggested 22:36.480 --> 22:42.560 it would be difficult because the page on which it certain part of the music is at is different 22:42.560 --> 22:47.600 for everyone. So we can't sing that, but we could sing just switching over to a new piece. 22:48.560 --> 22:54.000 That wasn't the question, the question what you have a system to manage users? Yes. 22:54.000 --> 23:00.560 And is this system only internal to the program or can it be interfaced with an external user 23:00.560 --> 23:07.040 management system so that you can have just one account to use your app and other apps for the 23:07.040 --> 23:13.280 band? Yes, so right now, no, it's just a JSON file with a hash password. Well, thank you. 23:13.280 --> 23:17.440 Yeah. Okay, time's up. Thank you very much.