Spinamp 🛠 Building a Web3 Music Experience using the Spindex - Aidan Musnitzky

[Applause] [Music] cool thanks for joining us we have aiden here from spin-up and this session today will be on building a web tree music experience using spindex they did not let you take the stage and if you have any questions in the meantime feel free to pop them in the chat and we can answer them at the end thanks cool hey everyone i'm aiden from spin up and today i'm going to be talking to you about spin up and showing you some of the dev tools that we have available that you can potentially use during the hackathon so if you're not familiar with spin amp spin amp is a way to help you explore curate share and listen to the growing public library of web3 artists and media and there's so much going on anyway through music that you've all seen and so what we're trying to do is index and aggregate all of that and also give away for people to really consume all of the content that's being produced and so the main kind of product we're working on is a app for listening to music um we've got an iphone app the web app on android our website's www we don't spin if you want to check out the app and so yeah it's on on app store um on ios uh this is kind of what it looks like on ios for browsing music similarly it's on android on the google play store and here's the web app um you can use the app to browse through artists see the different platforms we index um and listen to tracks and it's really designed to be a music player that is really smooth and easy to use in like a frictionless way of listening to and discovering music um but what we released a few days ago is dev.jspennam.xyz um and so this is our collection of tools for helping people build new music experiences and tap into the web through music industry and ecosystem and so there's a whole bunch of tools that we've got available i'll go through them and talk about them each uh one by one today and hopefully inspire some ideas for people to start building new web3 music experiences um also if you want to connect with us feel free to uh reach out on twitter or join our discord and ask questions and get involved and we'll definitely help you use any of these tools or or get onboarded um to [Music] getting to build stuff um and so yeah so maybe i'll go through the tools one by one uh the first one is spun up in bed so this is an easy way that you can embed uh and customize your music play put on your website you can see here we've got this website you can go to kind of configure it and on the right there's this embedded player for chaos which is a web 3d music artist and so if you want to use it you go to spin out find any song any artist uh any playlist that you like so for example here's a playlist that i've made i can go and click the share button and then go to this embedded site generator paste in the url click generate code and now you've got an embedded player you can insert into any website so this is the player for a playlist that i made um and yeah that's it in time we're going to add more customization to this like custom theming custom layouts custom content and we've already got like a few people that are interested in potentially using this like one idea uh we've been thinking about um is you know taking these playlists and minting them in nfts so you could like embed the player and have a site to kind of browse uh players and have them and win them as nfts um or primarily this is for artists that you know want to have play embedded into their website they can use this to generate a playlist of their artists discography from web3 and play center so that's spin up in bed that'll be fleshed out and improving over time and it kind of embeds our existing interface but when you start to get into it the more interesting tools are kind of about deliver developer focus tools uh so the next one is winnipeg sdk so this is sdk it's a javascript client um for our api and our indexer which gives you an sdk which gives you access to all of the data that we've indexed across web3 so that includes music infotainments transfers sales and bids are coming soon it includes artist data and profiles track data playlists and the the nice thing about our index and aggregator is that it creates like a cohesive cross-platform uh profile for all artists and tracks and it's really like designed to build front-end experiences that have high quality data high quality content that run fast and that give you good access to the actual you know content and metadata across all of these platforms so installing it is straightforward you install it with the honor npm and then using it we expose different apis you can use so the documentation is here and it's on our git book page over here as an example for usage um here's one example fetching a track by a slug a slug is like a short uh piece of text that refers to the track so that it can be shared in links quite easily and there's other things for artists and tracks and in a teaser playlist if you look through the api reference on the left and you can see the different types of ears it is kind of type script based and so throughout the um throughout the sdk you you may come across types that you want to use for your different queries and so you can refer to the different types here um similarly uh here is the api reference that we're exposed for for the different records like for trucks there's an api for fetching all the trucks fetching tracks by id um for artists you can fetch all the artists veterans ids buy slugs which is like their name uh fetch specific tracks for a given artist uh if you look at collections this is for fetching collections from particular ethereum addresses one thing to keep in mind is this is not fetching the collections in terms of nfts it's fetching them in terms of like traps and and that's kind of one thing that our sdk has that you probably won't find in other apis is um it's quite easy to work with actual tracks and artists rather than just underlying nfts because there's a lot of uh different experiments and things that are doing with nfts some other segmenting one of one some are submitting mixing say 100 nfts some artists are doing weirder things and so what our kind of apis give you much more cleanly and easily is like the underlying tracks and artists and how those are connected to nfts uh similarly you can see with our nft apis um here this one is for fetching all the nfts that correspond to a specific track so whether the track is like part of a one-on-one platform or a kind of multi-print with 25 nfts or a generative project in the future when when we have those and there'll be clean ways to kind of distinguish between uh the tracks and the nfts um there's other kind of apis for ownership and for exploring nfd owners um there's apis for platforms these are the current platforms that we kind of index at the moment um and then lastly playlists uh and so kind of there there's kind of two ways of interacting with playlists api one is retrieving them so if you're not kind of familiar with playlists playlists are created within spin amp through our interface and when you're using the app people will be able to kind of create their own playlists within the app playlists are stored offline in clients and they're kind of just backed up onto um our api for data availability but uh you know everything's very much decentralizing client centric and so you can fetch playlists by id that people have created and access them through this api um if you're looking to create playlists there's also an api for doing that and for that you need to submit a signer one thing for our playlist is you know they're all signed by individual users wallets um and so uh in order to create playlists you need to sign them um and add the track ids to a playlist and yeah reach out for more details if you want to play with those apis there's also one kind of utility that we've got available to get the resized artwork url and we provide urls for artwork but when you're building a front-end experience you want to be fast you probably want to resize the artwork to be specific sizes um for faster loading and so the api uh provides that uh the next kind of tool we've got available is spinner books so this is essentially a wrapper around all the sdk that i just showed you that puts them into react hooks to make them easy to use within a react application so as you can see um here is the repo you install it with npm or on here's an example of using an alltracks query um this these hooks kind of are wrapped around uh react's query and so that gives you nice things like loading and refetching and error handling and you can use that to pull the tracks into your react components and use them straight away without even needing to dig into the lower level sdk similarly there's documentation for that and so here's the same kind of documentation for asp.net books installation usage etc um and for the reference it's got much of the same apis that i just went through on the sdk are available as react hooks as well and there's some docks in advanced usage if interested cool um so the next thing i'll talk about is our actual indexer and api so our indexer is the kind of underlying thing behind these repos um because and it's kind of exposing an api through graphql there is a graphql playground you can play with if you want to kind of dive into more of the technical details and this is the like index api graphql which is linked to from dev.xyz and as part of the playground you get like this ui that you can use to explore and create a schema so on the right you can see there's uh kind of docs that i'm an explorer that i'm looking at where you can see the different queries these correspond to different records in the database and the different types of queries and if you look at a little particular query say here all artists you can see it accepts arguments for filtering uh sorting and those kinds of things similarly when you're using explorer you can easily like construct queries on the left and play with the interface to find the query you want and then and kind of run a query so here you can see i've constructed a query for getting all the tracks uh getting the title the audio the art of the tracks uh the artist and actually actually the nft is for for that track as well uh in a nested career that gives you it all um i'd still recommend like if you're building an experience to use the sdk rather than the underlying api because the sdk provides a few nice things like i mentioned it provides um the uh artwork resizing um but also more importantly uh the sdk kind of handles some things that may be harder to do from just the api so for example because if we look at an example in the api um here you can see our api has um an ipfs hash for the audio as well as a url for the audio and this kind of is a little peek into how our indexer works where kind of philosophically what we try to do is build an indexer with data that's decentralized by default but nothing's perfect as we all know with nfts sometimes people you know use band-aids here and there and so for a lot of the platforms we index from sometimes the audio may be stored both s and um on a centralized server catalog's an example uh which is nice because catalog puts everything on ipfs in addition to their server and so when you're using the sdk we automatically gonna try and uh use the the kind of more decentralized system so when you're using the sdk you'll be pulling urls from ipfs but they are going to do that yet and so it does fall back to um centralized urls sometimes um when when needed and you know over time i think we're going to improve our index to kind of push everything to be decentralized even if the underlying platforms don't do that um so when you're using the sdk it gives you kind of the best of both where uh you'll get like most decentralized um setup uh as possible and then over time as things become more decentralized and like more underlying music nfc platforms work on improving how they create and maintain their nfts um it should uh converge to becoming more decentralized and then kind of be aligned with the ethos of progressive decentralization where you know we want to build stuff that people can actually use and take advantage of kind of blockchains and decentralization and pass along that spectrum over time as we can similarly that that applies to our index itself and so next i'll talk about that um so um let me just open that up here is the git repo for our actual indexer and so this is a kind of decentralized indexer for music nfcs uh that does the aggregation that i've been talking about through our sdks and this is kind of probably more complicated repo if you're a more experienced developer then this may be something that you're interested in looking at um how it works is we index unchained music activity across multiple chains and we augment that data with both the on-chain data that's unchained but also like off-chain data from you know some centralized sources so ipfs r weave and then the index also transforms and connects that data into a comprehensive cohesive and standardized schema um that builds stuff like comprehensive artist profiles across platforms um it also is designed to kind of store and maintain up-to-date real-time data for front-end experiences that are like real-time and up-to-date uh it's got a bunch of dependencies and setup that you can go through if you want to install it and run it and some guidelines on operations but maybe more interestingly i'll talk about is the design goals uh so when building this kind of indexer um there's a bunch of design calls you know being fast up to date and having low latency and liveness are important but there are kind of more things that become important when you're trying to build something decentralized so handling crashes and down times and errors of ourself is uh our index index is important but we also need to handle uh what happens with our dependencies and so you know like the indexer for example indexes some stuff from off-chain apis that may go down or go change over time and we want to ensure that the indexer continues gracefully irrespective and and so it's designed to be able to do that um it's also designed to be like parallelizable because you know we're adding new contracts and platforms slowly over time we don't have to reprocess everything and so um ways to add that or uh built-in extensions uh for adding new metadata and new data transformations are built in as well and a key thing is decentralization and consensus without coordination and so what that means is like if someone else runs this point and runs the indexer they should get to the exact same database states as anyone else which means that you know even though we don't have a php network we don't have consensus if different people are running the stack they'll end up with the same data in the same database and so essentially get to decentralization without requiring heavy consensus or coordination um and in order to kind of do that there's some design choices we need to make within the data and the processing pipeline um an example of that if you look through the architecture if you want to get into more of the details is using things like crdts uh as part of how we index um so this is kind of some of our goals that we aim for again it's not perfect but we you know make sure we do this for the most important bits of data like identify four records and again um over time are going to flesh this out and improve it uh as it evolves and so that's how indexer um and so yeah to summarize overview of our different tools if you want to just embed our existing stuff into your website you can use this spin up embed if you want to build your own front end that taps into the api using the sdk or hooks or potentially the underlying api is good or if you want to kind of contribute to a growing open source project the indexer is a good place to look to start and again if you want to keep in touch you can follow us on twitter and join our discord and um keep induction especially over the course of the hackathon i'll be available as well as one or two other devs on our team for help and support um we've also got kind of a bunch of apis that sorry a bunch of ideas that we suggested as part of hackathon but if you're looking for ideas feel free to reach out and check the youth global hackathon prizes page where there's a bunch of other ideas that we've listed as potential hackathon ideas you can work on um so yeah that's it maybe i'll pause there check the chat um if anyone has any questions or thoughts feel free to share them in the chat now um and we can kind of wait a few minutes to see if anything comes up otherwise uh that's it thanks aiden um wait a few seconds just to see if any questions come up and feel free to unmute yourself if you'd like to ask questions okay i think you've answered everything um but if any question comes up in the meantime feel free to go to discord and go to sponsor dash spin up and aiden will be able to answer it there thanks again cool thanks everyone you