This is a SPA (Single Page App) made to keep player alive while navigating through content. While all the content is being loaded into index.html dinamically, the app features routing and normal browser history with address url for each page and functional back/forward buttons.
This project represents an artist's page featuring a music player. The main goal is to get the interested user to follow on social networks or contact regarding a collaboration or event. This is an educational project made to serve as a Milestone Project (Interactive Front-End) for the Software Developer Diploma programme of Code Institute.
-
- Create online presence;
- Gather followers on artist's other social media pages;
- Promote artist for potential collaborations, concerts and other events;
- Present artist's work in an organised and interactive manner;
- Keep users up to date with new releases and upcoming events;
- Offer users with a music player and provide control.
-
- Learn about the artist by exploring his work;
- Stay up to date with artist's work and events;
- Check up and follow artist's social media pages;
- Contact the artist's team for an eventual collaboration, event;
- Control the music player in order to have a better exploring experience of artist's work;
- Have detailed information about each song.
-
-
- to easily navigate throughout the content.
- to easily understand how to control the music player.
- to be able to find artist's other social media profiles.
- to find details about artist and his work.
- to enjoy artist's work while navigating through the website.
-
- to be able to contact the artist's team for potential collaborations.
-
- to find contact information.
- to research artist's work and previous performances.
-
-
The website is designed to be consistent, intuitive and learnable.
- Interaction design
- For predictability, the interface interacts with user actions as the user expetcs. The scroll/swipe actions respond with the normal behaviour and buttons acts instantly on press.
- For consistency, the interface offers a subtle visual feedback to the user (on hover, focus and press of buttons and fields) which is similar throughout the application and helps the user to quickly learn the functionality.
- Information architecture
- The content is organised and prioritised by importance from top to bottom and left to right.
- The information is structured in nested lists.
- Interaction design
-
-
-
-
There are now 3 hero cards on landing page, inviting users to check out the content of the site, to check out the social networks of the artist and to get in touch if interested.
-
-
-
The album list is better displayed as each album looks like an actual CD/vinyl coming out of its case/slip when hovered/tapped.
-
A dynamically generated page shows after clicking on any of the albums. This page displays the album's data, the list of songs and "play all", "shuffle all" and "play" (for each song) buttons.
-
-
-
Due to the nature and format of the "about me" data received from the author, this page is now structured as a timeline in order to be the best presented.
-
-
- Mobile:
-
The bottom player controls are simplified to display the "waveform" (seeker), "now playing info", "play/pause button" and "next button" while the rest of controls are only displayed when the player is in expanded state (click/tap on "now playing info").
-
The expanded player appears in full-screen and contains "now playing info", "waveform", "controls" including "shuffle" and "loop" and a list of songs in current playlist with the one playing marked out.
-
- Tablet/Dektop:
-
The bottom player controls are always visible, they are full page width and they contain "waveform" and "controls".
-
- Mobile:
-
-
-
For better dynamics and consistency, the colours are automatically generated from the playing song art image and they are consistent throughout the website. They are set to be in good contrast and in relation with the focus of the website (the music). The same art image is set to be displayed in the background with a dark frost effect on top of it to offer dynamic and colourful backgrounds while keeping the contrast. This has been inspired from browsers/devices own implementations of
Media Session API. All colours and effects have fall-backs for unsupported browsers. -
There are four fonts used throughout the project, two main fonts used for text and headings, one font is used for brand text (logo) and one is used for now playing information on mobile:
- Big Shoulders Stencil Text is used for logo and it has a
cursivefallback andfont-weightof800. - Goldman is used for headings and it has a
cursivefallback. - Baloo 2 is used as a general font for all the text and links with different weights. It has a
cursivefallback. - VT323 is used for playing now information displayed on mobile footer. It is selected to replicate the classic lcd display found on most of media players. It has a
monospacefallback.
- Big Shoulders Stencil Text is used for logo and it has a
-
- All the media used in the project is the actual media received from the artist, it is genuine and it has all the copy rights.
- All videos in video library are loaded from external source (youtube) and they are approved by the source.
- All images are sized and compressed for the best UX flow.
-
- Icons are used throughout the project to help user understand more efficiently the meaning of the content. They are a very good asset to improve UX.
-
- Animations are used to better render the idea of music playing.
- The player art image is round and it rotates as music plays, it stops rotating when music is paused.
- The now playing section on mobile's bottom controls is animating left and right when the containing text exceeds the size of it's container.
- In the same now playing section there is an arrow moving up and down to let user know there will be feedback if it's clicked/tapped.
- Transitions are used to ease the user's progress while navigating the site and using the player.
- Collapsed player is sliding up when expanding and down when collapsing.
- Albums (discs) are coming out of their "box" when hovered by mouse or tapped.
- Photo thumbnails in the gallery light up when hovered and the large photos are transitioning between each other when changed.
- All buttons transitions their background colour, text colour and/or shadow by case.
- Animations are used to better render the idea of music playing.
-
For better dynamics and consistency, the colours are automatically generated from the playing song art image and they are consistent throughout the website. They are set to be in good contrast and in relation with the focus of the website (the music). The same art image is set to be displayed in the background with a dark frost effect on top of it to offer dynamic and colourful backgrounds while keeping the contrast. This has been inspired from browsers/devices own implementations of
Website's features are presented in an importance order.
- Allows users to navigate through the site. The navigation bar is fixed to top and always visible. The navigation links are grouped by expandable and non-expandable. The main links are non-expandable ("Music library", "Video Library" and "Photo gallery") but their text dissapears on mobile, leaving only the meaningful icons.
-
-
The player's most used controls will always be visible (on footer) as well as current playing song. The playlist and more controls will be collapsed (but expandable) on mobile and small screens and always visible on bigger screens.
-
The website features a Media Session API which offers user a better control on any supporting device. The media keeps playing while browser is minimized or device is locked. The browser has it's own implementation of Media Session API and it effectively communicates with the website to control the player.
-
It also uses
localStorageto save the player state in order to be able to be resumed when returning.
-
- A library of songs well organised in collections as albums. Each album can be played (normal or shuffled) individually, all albums cand be played (normal or shuffled) at once. Each song has a play button to be selected as starting song while loading the album's playlist.
- A list of videos dinamically loaded from artist's YouTube channel. They can be played without leaving the website. When video is played, music is paused automatically.
- A gallery of photos from events and behind the scene shots.
- A page presenting the artist's history, organised in a timeline manner.
- A page featuring all the contact details, link to social media pages and a contact form.
- Images are provided with descriptive text. The website is optimised for screen readers and allows users with impaired vision to zoom at any point.
- Workspace
- Ubuntu20.04 as Operating System
- Visual Studio Code as Integrated Development Environment
- Languages
- Frameworks & Libraries
- Bootstrap5 is used for its great responsivness and styling classes and its javascript functionality (modal).
- Font Awesome icons were used for aesthetic and UX improvements.
- Google Fonts is used as the main font resource.
- AmplitudeJS for audio player capabilities.
- Vibrant.js to extract colours from the meta image.
- Youtube API to implement dynamic video loading straight from artist's youtube channel into the site.
- Tests
- Jasmine for unit testing.
- Version Control
- Git as Version Control System.
- Github for repository hosting.
- Commitizen for commit linting.
- Wireframes
- Balsamiq for creating wireframes.
- Media
- Inkscape for creating the favicon.
- Adobe Photoshop Express for quick resizing and cropping images top improve performance.
- TinyJPG for compressing images.
- Convertio for converting favicon from
.pngto.ico. - CloudConvert for converting screen recording from
.webmto.gif. - EZGif for cropping
.giffiles used writing this documentation.
-
Issue Fixed Access pages by direct URL ✔️ song percentage from localStorage ✔️ AmplitudeJS issue ✔️ Resume playback on shuffle ✔️ Samsung Internet issue ✔️ Safari issue ✔️ -
Test Result User Stories ✔️ Code ✔️ Unit ✔️ Functionality: links and buttons ✔️ Functionality: browser back/forward ✅ Functionality: form validation ✔️ Functionality: music player ✔️ Functionality: console errors ✔️ Compatibility: Responsiveness ✔️ Compatibility: System-cross ✔️ Compatibility: Platform-cross ✔️ Compatibility: Browser-cross ✔️ Performance ✔️ Accessibility ✔️ HTML Validation ✔️ CSS Validation ✔️ JS Validation ✔️ Overflow ✔️ Spelling ✔️
-
The project was deployed to GitHub Pages using the following steps:
- Log in to GitHub and locate the D-man Repository.
- At the top of the Repository, locate and click the "Settings" Button on the menu.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "main" branch.
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
-
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps:
- Log in to GitHub and locate the D-man Repository.
- At the top right of the Repository just above the "Settings" Button on the menu, locate and click the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
-
- Log in to GitHub and locate the D-man Repository.
- At the top of the Repository just above the list of files, locate and click the "Code" dropdown.
- To clone the repository using HTTPS, under "Clone", make sure "HTTPS" is selected and copy the link.
- Open Git Bash.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/pinco227/D-man.git- Press Enter. Your local clone will be created.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.$ git clone https://github.com/pinco227/D-man.git Cloning into 'D-man'... remote: Enumerating objects: 642, done. remote: Counting objects: 100% (642/642), done. remote: Compressing objects: 100% (414/414), done. remote: Total 932 (delta 337), reused 479 (delta 183), pack-reused 290 Receiving objects: 100% (932/932), 312.10 MiB | 22.81 MiB/s, done. Resolving deltas: 100% (394/394), done. Updating files: 100% (166/166), done.
-
- DMAN for sharing his content to create this project.
-
- GreenSock user: ZackSaucier for the "address bar never dissapear on mobile" snippet.
- StackOverflow user: Stickers for up and down arrow animation SOLUTION used in player now playing section (mobile).
- StackOverflow user: sweets-BlingBling for mobile detection snippet used for a better navigation experience.
- StackOverflow user: tvanfosson for his
clickHandler()function from this post which was adapted to pass a function as parameter and used to open the album details page with a delay on mobile devices (so the user experience the album animation). - StackOverflow user: Raymond Ativie for his "close modal on browser back button" snippet.
- Bootsnipp user: Rafamaciel for timeline snippet used in the About me page.
- Rafael Pedicini for this trick to make SPA work on GitHub Pages. See issue.
- Skay for routing implementation as described in this blog article.
- W3Schools for (How To)JS Media Queries.
- DMan for his enthusiasm in collaboration for building this project and his helful feedback and great ideas throughout the proccess.
- My Mentor: Nishant Kumar for continuous helpful feedback.
- Tutor support at Code Institute for their support.
- Slack Code Institute community for feedback.
- Peer student: Alexandru Valentin Grapa for helpful feedback along the coding progress and for help with iPhone device testing.
- Youtube Music App and Spotify App for design inspiration.