Go here for the live version.
A Musikalisches Würfelspiel (German for "musical dice game") was a system that used dice to randomly 'generate' music from precomposed options. These 'games' were quite popular throughout Western Europe in the 18th century. Several different games were devised, some that did not require dice, but merely 'choosing a random number.'
The way these games work may be understood in analogy to sentence construction.
| n | A | B | C | D |
|---|---|---|---|---|
| 1 | The cow | ran | past | the field. |
| 2 | The pig | walked | through | the yard. |
| 3 | The sheep | ran | into | the marsh. |
A die is rolled for every column and the result of each roll determines which word in that column is used. For example, rolling 2,3,1,3 would give the expression "The pig ran past the marsh". Each progression is essentially the same, there may be more or less choices for different slots, and the choices offered for each slot are slight variations rather than being entirely different.
- Fragments are 2 bars long rather than 1.
- All the music was composed by me.
(Selected in blue an example of a possible outcome)
Any end of any of the columns works musically well with the beginning of the following column, so each throw of the dice will create a different piece of music every time (albeit harmonically similar).
The target audience for this website is music lovers, musicians and people interested in music generation, but it's not limited to those. The app can be enjoyed by casual public as well as it requires no deep understanding of music in order to produce immediate musical feedback.
This project recreates the old game known in German as Musikalisches Würfelspiel in a modern and minimalistic way.
While there are a couple somewhat similar implementations available, this project makes use of Howler.js to deal with media files thus making it ready for the modern web, including mobile platforms. These other attempts don't perform well (or at all) on mobile, which accounts for over 54% of the total web traffic.
"As a user, I would like to ____________ "
- have historical information about the origins of the game.
- read clear instructions on how to play the game.
- have clear and quick feedback from the app on clicks by mouse, trackpad and taps.
- have a clear visual understanding of how the randomisation works and what sound is currently playing.
- be able to fully interact with all the buttons without having to go to a different button to stop a sound.
- enjoy the sound of music combined with mathematical functions.
- be surprised and amused by the unexpected musical turns of random music generation.
- understand the logical thinking behind the game.
- be able to hear to all original pieces before fragmented and randomised.
- have the possibility to play each individual fragment in the grid in order to understand how the randomisation works.
- be able to get in touch with the developer by sending him an email.
- easily find ways to follow further projects by the developer.
- be able to get in touch with the developer in different ways.
- be offered an alternative to play the game in case I arrived at the app with Internet Explorer.
Due to the large quantity of buttons needed to recreate the game, bootstrap has been used to guarantee responsiveness. Relative units were used throughout CSS rules to ensure the app would fit all scenarios while staying clearly legible.
Bootstrap was my framework of choice due to its felixibility in responsiveness.
The Color Palette was chosen with complementary hues in mind for contrast and positive visual impact. It has purposefully been given a modern design to contrast with the aesthetics of the 18th century as this emphasizes the novel approach for the app.
I chose Montserrat to be the only font in this project because of its excellent legibility in smaller font sizes. This was important where there are space limitations for the text such as in the music grid. I also didn't want that the choice of a more ornamental font, or multiple fonts, could as a result deviate the attention from the more important elements of the app.
This website is fully responsive to all sizes and devices. Making the main music grid reactive and legible in small devices was a challenge which was sorted thanks to a combination of factors: Bootstrap's elasticity, clarity of the font family, clear styling highlighting events and discrete use of colors.
- The app allows the user to sample the music in different ways, by listening to complete music files, small fragments and (most importantly) random arrays composed from those small fragments.
- From listening to defined MP3 files to letting the user choose which pieces to include or exclude from the game.
- The app always gives clear feedback about what is being played and how to interact with it.
- Navigation is intuitive, clear and always available.
- All the content is displayed in a single page and scrolling through the different sections is highlighted by the spy on the navbar.
- On scrolling down, a transparent floating arroy appearing hints the user for a quick shortcut to go back to the top of the page.
- The possibility for the user to download the resulting randomised piece of music.
- Record the music on an acoustical instrument rather than using midi sounds.
HTML: Used for markup.
CSS: Used to style the elements of the app.
Bootstrap: to make use of its grid system and responsiveness.
JavaScript: Used for the functionality of the app.
jQuery, to access and manipulate the DOM.
Howler.js: used to access and deal with all audio elements in an efficient way, ensuring portability on all platforms.
email.js: to send emails through my contact form.
Font Awesome, for all icons.
Visual Studio Code: my IDE of choice for all my projects.
GitHub: My remote storage for this project.
Balsamiq: to create the wireframes of this project.
Audacity: to trim, edit and manipulate all music files.
-
- No warnings or errors reported.
-
- No warnings or errors reported.
-
- No errors found.
-
- No errors found.
Multiple manual tests were performed to ensure the best possible user experience. This app is fully compatible with all browsers tested except the ones mentioned in the Compatibility section, in both desktop and mobile environments. The following browsers were tested:
- Desktop
- Chrome (v. 80.0.3987.132)
- Firefox (v. 73.0.1)
- Safari (v. 13.0.5)
- Opera (v. 67.0.3575.53)
- Mobile
- Safari
- Chrome
- Firefox
These were the manual tests performed and passed:
- There's never the necessity of pressing the go-back button
- All external links open in a new tab
- Navigation works as expected, without reloading the page
- Pressing any of the music buttons has a purpose, and doing so stops any other or the current sounds, except the buttons of the grid, which have a length of 2 seconds and for which that's unnecessary.
- Scrolling is smooth accross all browsers.
- Modals open and close as expected.
- The floating button works correctly.
- The contact form has required fields (they validate) and works correctly sending emails.
- Sending an email provides the user feedback on email sent. Feedback disappears after a couple seconds.
- Menu (when collapsed) after opening, closes correctly on all browsers when clicking on a link or outside of it.
- Randomisation works smoothly and doesn't crash.
- Repeatedly and quickly pressing the buttons doesn't break the app
- Connections between randomly connected fragments play seamlessly, making the resulting randomised piece play as one mp3 file.
- There are no console errors.
- There's no overflow.
- Menu spy works as expected.
- Navigation never breaks.
- Clicking on the logo brings to the top without reloading the page.
- Using Internet Explorer will make a warning appear telling the user to use a different browser for this application, and giving them the correspongind links to download them.
Internet Explorer is not compatible with the JavaScript used in this app. The issue has been handled by warning Internet Explorer users to choose another browser to ensure compatibility.
Besides not performing on Internet Explorer (see above), there are no known issues.
The method originally used to detect IE browsers can be found here. Although this method worked perfectly, it made the CSS validator complain. After further investigation I implemented the current method as described here which displays the proper warnings on IE without throwing a validation error (Status: Solved).
This project can be ran locally by going to this Repository link and clicking on the Clone or Download button and copying the link provided.
In your IDE, open a Terminal window and change to the directory where you want to clone this project and type Git clone "your copied link".
After pressing Enter the project will be created and cloned locally.
Alternatively you can download the zipped file, decompress it and use your IDE of choice to access it.
The live version of this website is hosted on GitHub Pages and will update as new commits occur.
The method used to deploy this website was as follows:
- In GitHub, navigated to my repository.
- Under my repository, clicked "Settings".
- Under the "GitHub Pages" section, used the Source drop-down menu and selected a publishing source, in this case the Master Branch .
- The website was immediately published and a green tab appeared with a link to the live website.
- The link obtained is the one displaying at the top of this document.
- Mozart Dice Game served as trigger and inspiration to build a more dynamic and modern version of the game.
- Musikalisches Würfelspiel (Wikipedia article) was used for historical information about the original game.
- All the music for this app was composed and edited by me.
- Logo designed after a die by me on Adobe Illustrator.
This app wouldn't have seen the light without the help of, amongst others:
- Stack Overflow #1 place to find answers of all kinds.
- W3Schools Another extremelly complete source of information.
All code that helped and was adapted to serve the purposes of this website has been properly marked as such in the comments.
- Simen Dehlin, mentor and patient counselor.
- Roko Buljan, for his invaluable help and sympathy.
- Tim Nelson, for great help in several moments of the process.
- Fran, for proofreading and being there making it all the more enjoyable.