How to get Song Lyrics with Free API?
Who are looking for lyrics?
Have you experienced that when you want to sing a song but don’t remember the lyrics? I think general people have this experience before. Apart from this general purpose of lyrics, some video makers might also want to get the lyrics of songs they use in the videos as the subtitles. When a music instrument teacher writes a score, he probably also needs the lyrics to be in the score. You can’t deny that everyone at some point may be looking for some lyrics for any purpose. The next question is, “where can I find the lyrics?”.
Where can I find the lyrics?
The most intuitive way to find the lyrics, of course, is to Google it. You may then land on some lyrics websites, like Genius or KKBOX, which provides plenty of lyrics. Another option might be using the lyrics feature provided by some Music player Apps, like Spotify. Some of its songs might have lyrics attached so users could look for lyrics there. However, when it comes to application development, it is tidious for developers to copy the lyrics from those sources, especially when there are a million song lyrics to copy. Here comes a Song Lyrics API to solve it.
What is an API?
We all know that there are somethings we just don’t want do it manually. That’s where APIs come in. An API, or application programming interface, is a set of rules and specifications that allow two software programs to communicate with each other. Developers can build applications that work seamlessly together and make it possible for end-users to complete complex tasks with just a few clicks. By using an API, you can save yourself time and effort of having to write your own code from scratch. Let’s take a closer look at what an API is and how you can use it in your own development projects. If you want to know more about what an API is, check this link out.
For example, imagine being able to book a flight, hotel, and rental car all in one place by using just a few taps on your smartphone. This would not be possible without APIs! As the world becomes increasingly interconnected, the importance of well-designed APIs will only continue to grow.
What Song Lyrics API can do?
Song Lyrics API offers various functionalities for different use cases. Here are the major features.
1. Search for song lyrics by the song title and the name of artist
The major feature of this API, of course, is searching for song lyrics. To identify the song, users have to input the song title and also the name of artist for the case that two different songs sharing the same name.
2. Search for songs by the name of artist
In case users don’t remember the song title, they can also search for the song by inputting the name of the artist first, then get the lyrics of the song afterwards.
Create a sample Song Lyrics API
Why should you choose this Song Lyrics API?
The Song Lyrics API is supported by OpenAPIHub, an All-in-one API Platform that supports API Needs and it is certified as “AWS Qualified Software” since 2022. You can register for an API portal for free, share and monetise APIs easily on the trustable platform certified by ISO27001.
Features
Using this tool, you can get lyrics of the song you want.
Prerequisites
You will need a suitable API provider. Using Song Lyrics API, you can proceed easily as follows :
1. OpenAPIHub Developer Account
You need to sign up for an OpenAPIHub developer account in order to subscribe and access this API. For more information, please refer to “Register as a Developer“.
2. Active API Subscription
You need to subscribe to this API before consuming it. Many APIs come with a free trial plan so that you can experience the API functions provided free of charge. For more information, please refer to “Subscribe to APIs“.
3. API Credential
An API Key is required to access the API. It can be obtained in the Developer Admin Portal once you have completed the signup to OpenAPIHub. For more information, please refer to “Create API Key“.
Endpoints
There are two parameters available in this API.
GET /lyrics/search-artist: Search for artists
GET /lyrics/search-song: Search for songs
GET /lyrics/search-album: Search for albums
GET /lyrics/list-by-artist: List songs of the artist input
GET /lyrics/list-by-album: List albums of the artist input
GET /lyrics: Get the lyrics
You may check out the full API documentation here in the OpenAPIHub.
Create an attractive User Interface
We are here to guide you with detailed steps. Let’s get into the first part – creating a user interface for users to enter the parameters.
Try this HTML yourself!
<div id="app">
<div class="demo-description">
<h2>Song Lyrics</h2>
<span>To protect your credentials.</span>
<br>
<span>DO NOT save this API Key in the code sandbox!!</span>
</div>
<div class="test-area">
<div class="input-area">
<label for="api-key">API Key</label>
<input
id="api-key"
type="text"
placeholder="Input your key here"
v-model="apikey"
>
<br>
<label for="search-option">Search Option</label>
<select id="search-option" v-model="searchOption">
<option value="lyrics">Search for Lyrics</option>
<option value="search-artist">Search for Artists</option>
<option value="search-song">Search for Songs</option>
<option value="search-album">Search for Albums</option>
<option value="list-by-artist">List Songs of Artist</option>
<option value="list-by-album">List Songs in Album</option>
</select>
<br>
<template v-if="searchOption == 'lyrics'">
<label for="lyrics-song-id">song id</label>
<input id="lyrics-song-id" type="text" placeholder="from other search options" v-model="song_id">
<br>
<label for="lyrics-song-title">song title</label>
<input id="lyrics-song-title" type="text" placeholder="required if no song id" v-model="song_title">
<br>
<label for="lyrics-artist-name">artist name</label>
<input id="lyrics-artist-name" type="text" placeholder="required if no song id" v-model="artist_name">
<br>
</template>
<template v-if="searchOption == 'search-artist'">
<label for="search-artist-artist-name">artist name</label>
<input id="search-artist-artist-name" type="text" placeholder="required" v-model="artist_name">
<br>
<label for="search-artist-genre">genre</label>
<select id="search-artist-genre" v-model="genre">
<option value="zh-m">Chinese male</option>
<option value="zh-f">Chinese female</option>
<option value="zh-gp">Chinese group</option>
<option value="en">English</option>
<option value="jk">Japan or Korean</option>
</select>
<br>
<label for="search-artist-page">page</label>
<input id="search-artist-page" type="text" placeholder="default 1" v-model="page">
<br>
<label for="search-artist-limit">limit</label>
<input id="search-artist-limit" type="text" placeholder="default 20" v-model="limit">
<br>
</template>
<template v-if="searchOption == 'search-song'">
<label for="search-song-song-title">song title</label>
<input id="search-song-song-title" type="text" placeholder="required" v-model="song_title">
<br>
<label for="search-song-limit">limit</label>
<input id="search-song-limit" type="text" placeholder="default 20" v-model="limit">
<br>
</template>
<template v-if="searchOption == 'search-album'">
<label for="search-album-album-title">album title</label>
<input id="search-album-album-title" type="text" placeholder="required" v-model="album_title">
<br>
<label for="search-album-limit">limit</label>
<input id="search-album-limit" type="text" placeholder="default 20" v-model="limit">
<br>
</template>
<template v-if="searchOption == 'list-by-artist'">
<label for="list-by-artist-artist-id">artist id</label>
<input id="list-by-artist-artist-id" type="text" placeholder="required" v-model="artist_id">
<br>
<label for="list-by-artist-limit">limit</label>
<input id="list-by-artist-limit" type="text" placeholder="default 20" v-model="limit">
<br>
</template>
<template v-if="searchOption == 'list-by-album'">
<label for="list-by-album-album-id">album id</label>
<input id="list-by-album-album-id" type="text" placeholder="required" v-model="album_id">
<br>
<label for="list-by-album-limit">limit</label>
<input id="list-by-album-limit" type="text" placeholder="default 20" v-model="limit">
<br>
</template>
<button v-on:click="search">Search</button>
</div>
<div class="output-area">
<template v-if="error">
<div v-html="error" />
</template>
<template v-else-if="!result">
<div>
Enter an API Key, select the search option, fill in the required fields, then press "Search".
</div>
</template>
<template v-else>
<div v-html="result"/>
</template>
</div>
</div>
</div>Apply CSS on the user interface
After creating the basic structure to get user input for the parameters, we need to add the following CSS to decorate our UI to make it more attractive!
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
body {
background: #20262E;
padding: 20px;
font-family: 'Open Sans', sans-serif;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
height: 800px;
}
.demo-description {
text-align: center;
margin-bottom: 20px;
}
.demo-description h2 {
font-weight: semibold;
margin-bottom: 5px;
}
.demo-description span {
color: #999999;
}
.test-area {
display: flex;
}
.input-area {
text-align: right;
}
.input-area label {
display: inline-block;
line-height: 48px;
margin-right: 8px;
text-align: right;
width: 150px;
}
.input-area input[type="text"] {
border: 1px solid #999999;
border-radius: 3px;
height: 30px;
width: 150px;
padding: 0 7px;
}
.input-area select {
border: 1px solid #999999;
border-radius: 3px;
height: 30px;
width: 166px;
padding: 0 7px;
}
.input-area input::placeholder {
color: #d0d0d0;
}
.input-area button {
background-color: #57abf0;
border: 0;
border-radius: 4px;
color: #ffffff;
font-weight: 600;
margin-top: 15px;
width: 166px;
padding: 15px 10px;
}
.input-area button:hover{
background-color: #4281b5;
}
.output-area {
color: #505050;
font-size: 14px;
margin-left: 20px;
margin-right: 0px;
padding-top: 5px;
width: calc(100% - 360px);
border: 2px solid #57abf0;
border-radius: 5px;
}
.output-area div{
margin: 5px;
max-height: 370px;
overflow: auto;
}
@media screen and (max-width: 616px) {
.input-area {
text-align: center;
}
.input-area label {
text-align: left;
}
.input-area button {
width: 140px;
padding: 10px 7px;
}
.output-area {
width: calc(100% - 150px);
}
}Create a sample Song Lyrics API with Vue.js
Now, you can add the following Vue.js script.
const basepath;
new Vue({
el: '#app',
data() {
return {
apikey: '',
searchOption: '',
song_id: null,
song_title: null,
artist_id: null,
artist_name: null,
album_id: null,
album_title: null,
genre: null,
page: null,
limit: null,
result: '',
error: ''
}
},
methods: {
search: function() {
this.error = ''
this.result = 'Loading...'
const axiosConfig = {
headers: {
'content-type': 'application/json',
'x-openapihub-key': this.apikey
}
};
switch(this.searchOption){
case 'lyrics':
if(!this.song_id) this.song_id = null;
console.log(this.song_id);
console.log(this.song_title);
console.log(this.artist_name);
axiosConfig.params = {
song_id: this.song_id,
song_title: this.song_title,
artist_name: this.artist_name
}
axios.get(basepath+'/lyrics', axiosConfig)
.then(res => {
let result = ""
for(let line of res.data.lyrics){
result = result + line + '<br>';
}
this.error = ''
this.result = result
}).catch(err => {
this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
})
break;
case 'search-artist':
axiosConfig.params = {
artist_name: this.artist_name,
genre: this.genre,
page: this.page,
limit: this.limit
}
axios.get(basepath+'/lyrics/search-artist', axiosConfig)
.then(res => {
this.error = ''
let result = ''
for(let index in res.data.available_artists){
result += `${Number(index) + 1}. ${res.data.available_artists[index].artist_name} [id: ${res.data.available_artists[index].artist_id}]<br>`
}
if(result == ''){
this.result = 'no available artist'
}else{
this.result = result
}
}).catch(err => {
this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
})
break;
case 'search-song':
axiosConfig.params = {
song_title: this.song_title,
limit: this.limit
}
axios.get(basepath+'/lyrics/search-song', axiosConfig)
.then(res => {
this.error = ''
this.result = 'Loading...'
let result = ''
for(let index in res.data.available_songs){
result += `${Number(index) + 1}. ${res.data.available_songs[index].song_title} (by ${res.data.available_songs[index].artist_name}) [id: ${res.data.available_songs[index].song_id}]<br>`
}
if(result == ''){
this.result = 'no available song'
}else{
this.result = result
}
}).catch(err => {
this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
})
break;
case 'search-album':
axiosConfig.params = {
album_title: this.album_title,
limit: this.limit
}
axios.get(basepath+'/lyrics/search-album', axiosConfig)
.then(res => {
this.error = ''
this.result = 'Loading...'
let result = ''
for(let index in res.data.available_albums){
result += `${Number(index) + 1}. ${res.data.available_albums[index].album_title}(by ${res.data.available_albums[index].artist_name}) [id: ${res.data.available_albums[index].album_id}]<br>`
}
if(result == ''){
this.result = 'no available album'
}else{
this.result = result
}
}).catch(err => {
this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
})
break;
case 'list-by-artist':
axiosConfig.params = {
artist_id: this.artist_id,
limit: this.limit
}
axios.get(basepath+'/lyrics/list-by-artist', axiosConfig)
.then(res => {
this.error = ''
this.result = 'Loading...'
let result = ''
for(let index in res.data.available_songs){
result += `${Number(index) + 1}. ${res.data.available_songs[index].song_title} [id: ${res.data.available_songs[index].song_id}]<br>`
}
this.result = result
}).catch(err => {
this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
})
break;
case 'list-by-album':
axiosConfig.params = {
album_id: this.album_id,
limit: this.limit
}
axios.get(basepath+'/lyrics/list-by-album', axiosConfig)
.then(res => {
this.error = ''
this.result = 'Loading...'
let result = ''
for(let index in res.data.available_songs){
result += `${Number(index) + 1}. ${res.data.available_songs[index].song_title} [id: ${res.data.available_songs[index].song_id}]<br>`
}
this.result = result
}).catch(err => {
this.error = `Error occurred -<br>${err?.response?.data?.message ? err?.response?.data?.message : err}`
console.log('Error', err?.response?.data?.message ? err?.response?.data?.message : err)
})
break;
default:
this.error = 'Please select a Search Option';
}
}
}
})Now that we have all the materials prepared. Let’s take a look at getting our first lyrics with our API.
Simply fill in an API Key, choose “Search for Lyrics” on the Search Option, fill in a song title and an artist name, then press “Search”. Swiftly, you can get your very first lyrics from the Song Lyrics API.
Sample output of lyrics of “Ed Sheeran – Bad habit”:
Error Responses
You might get some error responses under certain circumstances.
Example response with status 401 – Unauthorized
{"message":"Invalid authentication credentials"}Example response with status 500 – Internal Server Error
{"message": "Internal server error"}Supported response codes
- 200 – OK
- 401 – Unauthorized
- 500 – Internal Server Error
Conclusion
Due to the constantly rising demands of song lyrics, it can be one of the most crucial parts of a music application. By understanding how to create a Song Lyrics API, you can get song lyrics with easy-to-use Song Lyrics API for your business or any needs. In fact, there are various ways to create a Song Lyrics API. Here, we provided you the easiest way to do it.
Next Steps?
Enjoy the above tutorial and want to learn of more useful API? Explore more on OpenAPIHub!
OpenAPIHub is an API Platform that help you define API subscription and enable API Monetization with ease. Check the following 2-min What is OpenAPIHub video for more and try OpenAPIHub for Free!
Ready to Start Your API Journey?
Join OpenAPIHub and connect to the fast growing API Hub Community to grow your API Business today!
