Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

A Musical Journey with Drupal

Parent Feed: 

If I say that in today’s booming social era, having a Facebook or Twitter account is not enough in terms of web presence for your music, you would agree, right?

We all know that having a website for the same purpose, not only delivers a professional impact on the audience but also eliminates the restrictions that these external sites would have. 

White background with Drupal logo wearing headphones.


For instance, you desire to put banners on your site to increase the song sales or wish to provide details about your latest concert to your fans - How do you do it?

Of course, it is only possible if you have your own music website. And there is no better option than Drupal for this task. 

If you are thinking that why specifically I am talking about Drupal then you need to know that Drupal is one of those CMSs which is flexible and consists of an excellent API framework that can accommodate almost all conceivable functionalities. 

Choosing Drupal for Your Music Website 

Yes, it is important to unite music composers i.e musicians and bands, with their fans and loved. The sole reason to trust Drupal for this task is only because:

It has responsive web designs 

There would be a variety of audience for your music website, using different devices. While switching from big screen to small screen, things change. Size of the image is modified, menu items become drop down, columns are pushed around the webpage that makes sense with content being the supreme leader. All of this is easily handled by Drupal.

Drupal 8 consist of responsive web designs that makes it “100% good to go” with all the devices.

Responsive Design is a strategy for optimizing the display of a website using CSS and javascript to respond to different device capabilities. 

Every musician wants that his work leads to more word of mouth referrals and that new fans are added to the list every day. A responsive website leads to a better user experience with them spending more time on your site. Moreover, responsive web designs would help the end users to access menu, links, buttons and fill out forms easily.  More users mean more traffic. According to statista, 52% of the web traffic is generated from mobile devices. 

52% means half of the internet traffic, making responsive websites an important aspect of the whole scenario.
Short description on Grammy Awards Website


Multisite Setup 

There are chances that you might be building a music website for a band. Which means that each member of the band would require an individual site. This is where Drupal is the best option for you. It provides you with the ability to run multiple sites from one single Drupal codebase. Each site has a separate database, however, the projects that are stored in modules, profiles and themes can be installed by all the sites. 

Warner Music Group (built on Drupal )is a great example of this. The website manages and creates the web and mobile sites for more than 300 artists and bands. It serves millions of yearly visitors, promotes news, music releases etc. 
 

Screenshot of the homepage of Warner Music Group with a mobile phone placed beside it.


ABC ( Aliases, Block and Content type)

Your fans need details to keep up with your band’s performance or music concerts. This can be done with the help of multiple addresses or aliases. Aliases provide an option to the end users to find a particular website easily. With modules like pathauto, metatag, redirect you can make your music website search engine friendly. 

  • Pathauto modules help in automatic generation of URL/path aliases for various kind of content without requiring the end user to manually describe the path alias. 
  • The Meta tags modules allow you to automatically provide structured metadata for a website. These meta tags help in improving the ranking and display of the site in search engine results.
  • Once your website has a lot of content, you may need to audit it. This would include merging and deleting of pages that are no longer in use, and for that, you need to create URLs redirects. The Redirect module lets you create and manage these URLs using a simple user interface. 

A block would essentially act like a container that would hold all the content, lists of content, images and can be placed anywhere on the page. For example: if you want the visitors to contact you regarding any collaboration or get information about the latest concerts then the additional field can be constructed with the help of block. 

A content type is the collection of data fields grouped together in a logical set to facilitate content entry and display. Drupal core is preconfigured with two content types which allow you to create and save multiple posts. For example: In your music website you might have a content type “concert” that would include individual fields to collect the data about dates, place, price etc. The concert content type could be used to create hundreds of individual concert records.   

Performance and Scalability

Loading time serves as a major role when it comes to the performance of the website. According to Google developers, 40% of the users abandon a website if it takes more than 3 seconds to load. Thus, making speed a huge factor for the strength of the website. 

When it comes to a music website, the factor contributes even more. The visitors of your website definitely need a fast and a swift platform that loads the website quickly, and Drupal by default is the best CMS for this task.  Drupal 8 can scale well to millions of users if it is optimized well. A poorly optimized website not only slows down a website but affects the performance as well. Thus to improve and keep up the site performance modules like Blazy and Google analytics are used. 

  • Blazy module is used to provide its end users with faster load time and helps in saving data usage when they are not browsing the whole page.
  • Google Analytics module is a type of web statistics that are used to track and monitor the traffic of a particular website. It comprehends on the links which are being tracked (downloads, outgoing and mailto) by the visitors which are there on your page.

Content Editing /Customizing and Managing 

The site has to be easy for you to manage. It is important that formatting of content and adding of images ( without seeing any spooky HTML codes) on your music website is simple and accessible. Drupal provides with modules that would allow you to edit your content the way you want. With drag and drop and WYSIWYG tool content authors/non-developers can create and design pages easily. With the evolution of the Drupal platform, new upcoming layout builder seems even more promising. 

Drupal upcoming layout builder which would be stabilized in Drupal 8.7, is unique in offering a single, powerful visual design tool with three use case:

  • Use case 1: Layouts for template contents 

For the sites that have a significant amount of content, it is important that similar content have the same type of appearance. For instance, you are selling songs from the same album. For your fans, it would provide a consistent experience when browsing the song list, making them easier to differentiate. For content authors, the templated approach means that they don’t have to think about the layout of each song. 

Drupal 8's new Layout Builder lets you to visually construct a layout template that will be utilized for each item of the same content type (e.g. a "songs layout" for the "song" content type). This is achievable only because the Layout Builder serves from Drupal's powerful "structured content" abilities.

  • Use case 2: Customizing the layouts  

Suppose you desire to put a video of your jam sessions on your website and later think of updating a band picture with the video, it may not make sense to add an optional “highlighted video” field with the band picture.

Drupal 8 Layout Builder offers the ability to customize templates layouts on a case per case basis. In the above example, Layout Builder would let a content creator rearrange the layout for just that one band picture and put the video directly below the image. 

  • Use case 3: Custom Pages 

It should be noted that not everything is templated and content authors often need to create a one-off page on “About us”. Drupal 8 Layout Builder can be used to create dynamic one-off custom pages. A content author can begin with a blank page, design a layout with the addition of blocks. 

Hosting

The Drupal-based website which is specially designed for Lady Gaga witnesses heavy traffic spike every day. The burst in the traffic has to be handled periodically. 
Web Hosting provides space that you can buy on a web server to store your website files. When you tend to buy website hosting you basically rent server space on a server where all your files are placed. 
Drupal provides you with many websites hosting options. Which are not only safe to use, but it handles your site traffic also.  Some of the most popular Drupal based web hostings are:

  • SiteGround
  • A2 Hosting
  • GreenGeeks
  • Pantheon

Strong Roadmap

With a variety of modules in Drupal 8, from enhanced media management to out-of-the-box experience, Drupal 8 is getting stronger with each update. It makes sure that the visitors on your website have a good user experience with no backward compatibility breaks.

With the release of Drupal 8.6, a large number of improvement has been foreseen for content authors, evaluators, site builders, and developers. 

For content authors, Drupal has added a support for “remote media type”. In other words, you can easily embed Youtube and other videos in your content. 

For evaluators, Drupal 8.6 brought about “out-of-the-box experience” that let them install and test drive Drupal in minutes. They can install with the help of a demo profile that showcases all the capabilities by presenting a beautiful website filled with content right out of the box. This makes it easy for an end user to download and install a fully functional Drupal demo application within minutes. 

For the developers, Drupal 8.6 has brought about an API first platform that involves an overview of REST improvements. 

Drupal 8.7 has promised to bring even more sophistication the Drupal family. It ensures its end users with:

  • Stabilized features that target content author.
  • Adding of JSON API (that did not make it to the release of Drupal 8.6) that would allow users to rapidly create and decouple the applications.
  • It would present with stable multilingual migrations
  • Would continually improve the evaluators' experience.
  • Iterate towards an entirely new and unique decoupled administrative experience. 

Variety of Modules for a Music Website

The best part about Drupal is that it provides its end users with a variety of modules that help them to build their website. Some of the modules which you can use for your music website might include:

  • AudioField 

AudioField module enables you to upload or link audio files and play them on your site using one or many audio players. It has the power to support many audio formats. Currently, the module supports the following audio formats:

  1. Default HTML5 audio player (which is built-in)
  2. Audio.js 
  3. jPlayer
  4. MediaElement 
  5. Projekktor
  6. SoundManager 
  7. wavesurfer.js 
  8. WordPress Audio 

AudioField also supports player libraries and comes with the basic HTML5 audio player.

HTML5 is a built-in HTML audio player and requires no additional libraries to be installed 

It also supports additional audio player libraries which requires installation before use. 

  • Audio Embedded Field

Audio Embedded Field module creates a simple field type that enables you to embed audio from SoundCloud and other custom URLs to a field with the integration of media entity module for Drupal 8. You only need to provide URL to the audio and the module creates an embedded audio player. 

(It should be noted that this module is not covered by the security advisor)

Go Beatles (Case study)

No doubt on the fact that the music of Beatles have created history and has been marked as “evergreen”. With such a wide fan base audience, the website was expected to be more engaging. It needed to promote new albums, merchandise, and events in a way that engaged fans.  

Drupal was chosen because of its flexibility and excellent API framework.  

Goals of the Project

  • It was a need for the site to be easy for content editors to manage.
  • It was expected that the new articles could be pushed to Facebook.
  • The existing users could easily migrate to the new site, along with their prior profile and comments.
  • The user experience must be truly responsive and engaging on all devices.
  • It was required that the content pages must be built from existing collections of text, quote, image, and audio.
  • With millions of fans, it was evident that the site experiences heavy traffic every day.
  • Thus it was important that the site was eligible to handle large surges of visitors and traffic spikes.

How Drupal Was Used?

In terms of presenting an engaging story, one of the creative inspirations of the whole project was “The Beatles Anthology Book”. The key idea was to provide story snippets, images audio clips, videos of the band that allowed an arrangement in a different order. Different content types with the field to accommodate image, audio, video, the text was created. All the snippet of information was tagged using taxonomies and tile width. The story node used Entity Reference, Entity Reference View Widget that allowed the editor to sort vast content and filter it as well. 

As regards to theme layer, Drupal highly contributed to the website. The whole website was responsive and demonstrated the actions that had to be done by the editors. The site also depicted that Drupal can cope up with heavy loads and traffic spikes with the help of CDN module that contributed highly to deliver image and file assets via Amazon CloudFront (which was the main concern). Optimized and bandwidth efficient images were also required to deliver a responsive website. Thus, usage of modules like pictures and breakpoint along with some heavyweight template.phpcustomization was done to achieve a perfect theme layer.

Another vital requirement of the site was to tie the site with Facebook for the whole purpose of logging in, registering, and commenting. This was done to promote visibility of the site. Drupal provided with several packages that allowed the website to integrate with Facebook at various levels. With modules like Facebook auto post, Facebook OAuth and Drupal for Facebook the integration was possible. Not only this but feeds and SQL parser module were also used to query the old database.

Thus, without the help of Drupal and its modules, it would have taken an incredible amount of time and money.
 

An image of the beatles band with Unites States Of Amercia's flag in the background


Conclusion 

Yes, it is important for an artist to have a website that is specifically dedicated to them. Without it, there are chances of you losing out on gigs, promos, press etc. Thus, contributing to your music career and talent, the need for a website is clear.

Drupal here emerges as a helping hand. The CMS would provide you with a collection of modules that contributes to the construction of your website. 

At OpenSense Labs we present you with services that not only enhance the performance of your website but we also help you in getting close to your dreams by embracing innovative technologies that can be implemented on Drupal framework. Contact us at [email protected] to know how you can build a Drupal-based music website. 

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web