{"id":4016,"date":"2023-11-04T23:14:00","date_gmt":"2023-11-04T23:14:00","guid":{"rendered":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/"},"modified":"2023-11-05T05:48:23","modified_gmt":"2023-11-05T05:48:23","slug":"how-to-create-a-music-player-app-with-vue-js-and-deezer-api","status":"publish","type":"post","link":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/","title":{"rendered":"How to Create a Music Player App with Vue.js and Deezer API"},"content":{"rendered":"

Introduction<\/h2>\n

In this tutorial, we will learn how to create a music player app using Vue.js and the Deezer API. Vue.js is a popular JavaScript framework for building user interfaces, while the Deezer API provides access to a vast library of music tracks. By the end of this tutorial, you will have a fully functional music player app that can search and play music tracks from Deezer.<\/p>\n

Prerequisites<\/h2>\n

To follow along with this tutorial, you will need:
\n– Basic knowledge of JavaScript and Vue.js
\n– Node.js and npm installed on your machine
\n– A Deezer developer account and an API key<\/p>\n

Setting up the project<\/h2>\n

To get started, let’s create a new Vue.js project using the Vue CLI. Open your terminal and run the following commands:<\/p>\n

$ npm install -g @vue\/cli\n$ vue create music-player-app\n<\/code><\/pre>\n
Follow the prompts to select the appropriate options for your project. Once the project is created, navigate into the project directory and start the development server:<\/p>\n
$ cd music-player-app\n$ npm run serve\n<\/code><\/pre>\n
Open your browser and visit http:\/\/localhost:8080<\/a> to verify that the Vue.js project is set up correctly.<\/p>\n
Installing dependencies<\/h2>\n
Our music player app will rely on a few additional packages. Run the following command in your terminal to install them:<\/p>\n
$ npm install axios deezer-api vuex --save\n<\/code><\/pre>\n
Let’s go over what these packages do:
\n– axios<\/code> is a promise-based HTTP client used for making API requests.
\n– deezer-api<\/code> is a wrapper around the Deezer API, providing an easy-to-use interface for retrieving music tracks.
\n– vuex<\/code> is a state management pattern and library for Vue.js applications.<\/p>\n
Creating the Deezer API configuration file<\/h2>\n
Before we can make API requests, we need to store our Deezer API key securely. Create a new file named config.js<\/code> in the src<\/code> directory and add the following code:<\/p>\n
export const DEEZER_API_KEY = '<your_api_key>';\n<\/code><\/pre>\n
Replace <your_api_key><\/code> with your actual Deezer API key. Make sure to keep this key private and never commit it to a public repository.<\/p>\n
Creating the music search component<\/h2>\n
In the src<\/code> directory, create a new directory called components<\/code>. Inside the components<\/code> directory, create a new file named MusicSearch.vue<\/code>. Open MusicSearch.vue<\/code> and add the following code:<\/p>\n
<template>\n  <div>\n    <input type=\"text\" v-model=\"query\" placeholder=\"Search for music tracks\">\n    <button @click=\"search\">Search<\/button>\n\n    <ul>\n      <li v-for=\"track in tracks\" :key=\"track.id\">\n        {{ track.title }} by {{ track.artist }}\n      <\/li>\n    <\/ul>\n  <\/div>\n<\/template>\n\n<script>\nimport { DeezerAPI } from 'deezer-api';\nimport { DEEZER_API_KEY } from '@\/config';\n\nexport default {\n  data() {\n    return {\n      query: '',\n      tracks: []\n    };\n  },\n  methods: {\n    search() {\n      const deezerAPI = new DeezerAPI(DEEZER_API_KEY);\n      deezerAPI.searchTracks(this.query)\n        .then(response => {\n          this.tracks = response.data;\n        })\n        .catch(error => {\n          console.error(error);\n        });\n    }\n  }\n};\n<\/script>\n<\/code><\/pre>\n
Let’s break down what this code does:
\n– We import the DeezerAPI<\/code> class from the deezer-api<\/code> package and our DEEZER_API_KEY<\/code> from the config.js<\/code> file.
\n– Inside the data<\/code> function, we define the query<\/code> and tracks<\/code> properties, which will be used to store the user’s search query and the retrieved music tracks, respectively.
\n– The search<\/code> method is triggered when the user clicks the “Search” button. It calls the searchTracks<\/code> method from the DeezerAPI<\/code> class to search for music tracks that match the user’s query. Upon success, the retrieved tracks are stored in the tracks<\/code> property.
\n– Finally, we display the search input, search button, and the list of tracks using directives such as v-model<\/code> and v-for<\/code>.<\/p>\n
Adding the music search component to the app<\/h2>\n
Open the src\/App.vue<\/code> file and replace its contents with the following code:<\/p>\n
<template>\n  <div id=\"app\">\n    <MusicSearch \/>\n  <\/div>\n<\/template>\n\n<script>\nimport MusicSearch from '.\/components\/MusicSearch.vue';\n\nexport default {\n  components: {\n    MusicSearch\n  }\n};\n<\/script>\n<\/code><\/pre>\n
Now our music search component is included in the app’s template. If you restart the development server and visit http:\/\/localhost:8080<\/a>, you should see the search input and button.<\/p>\n
Playing music tracks<\/h2>\n
Let’s enhance our app by adding the ability to play music tracks. Update the MusicSearch.vue<\/code> file with the following code:<\/p>\n
<template>\n  <div>\n    <input type=\"text\" v-model=\"query\" placeholder=\"Search for music tracks\">\n    <button @click=\"search\">Search<\/button>\n\n    <ul>\n      <li v-for=\"track in tracks\" :key=\"track.id\">\n        {{ track.title }} by {{ track.artist }}\n        <button @click=\"play(track)\">Play<\/button>\n      <\/li>\n    <\/ul>\n  <\/div>\n<\/template>\n\n<script>\nimport { DeezerAPI } from 'deezer-api';\nimport { DEEZER_API_KEY } from '@\/config';\n\nexport default {\n  data() {\n    return {\n      query: '',\n      tracks: []\n    };\n  },\n  methods: {\n    search() {\n      const deezerAPI = new DeezerAPI(DEEZER_API_KEY);\n      deezerAPI.searchTracks(this.query)\n        .then(response => {\n          this.tracks = response.data;\n        })\n        .catch(error => {\n          console.error(error);\n        });\n    },\n    play(track) {\n      const deezerAPI = new DeezerAPI(DEEZER_API_KEY);\n      deezerAPI.getTrackUrl(track.id)\n        .then(response => {\n          const audio = new Audio(response.data);\n          audio.play();\n        })\n        .catch(error => {\n          console.error(error);\n        });\n    }\n  }\n};\n<\/script>\n<\/code><\/pre>\n
In this updated code, we’ve made the following changes:
\n– Inside the tracks loop, we added a “Play” button to each track. This button triggers the play<\/code> method when clicked and passes the respective track as an argument.
\n– The play<\/code> method calls the getTrackUrl<\/code> method from the DeezerAPI<\/code> class to obtain the URL of the track’s audio file. It then creates an instance of the Audio<\/code> class, sets the audio source to the obtained URL, and calls the play<\/code> method to start playing the track.<\/p>\n
Now, when you search for music tracks and click the “Play” button next to a track, the respective track should start playing.<\/p>\n
Conclusion<\/h2>\n
Congratulations! You have created a music player app using Vue.js and the Deezer API. In this tutorial, you learned how to set up a Vue.js project, make API requests with the Deezer API, and play music tracks using the Audio class. With this knowledge, you can further enhance the app by adding features such as a playlist, volume control, and track seek functionality. Remember to always properly handle error cases and enhance the user experience based on your requirements. Enjoy exploring the world of music with your new app!<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction In this tutorial, we will learn how to create a music player app using Vue.js and the Deezer API. Vue.js is a popular JavaScript framework for building user interfaces, while the Deezer API provides access to a vast library of music tracks. By the end of this tutorial, you Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[261,10,846,599,848,847,849,49,507,773],"yoast_head":"\nHow to Create a Music Player App with Vue.js and Deezer API - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Music Player App with Vue.js and Deezer API\" \/>\n<meta property=\"og:description\" content=\"Introduction In this tutorial, we will learn how to create a music player app using Vue.js and the Deezer API. Vue.js is a popular JavaScript framework for building user interfaces, while the Deezer API provides access to a vast library of music tracks. By the end of this tutorial, you Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:14:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:23+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"How to Create a Music Player App with Vue.js and Deezer API\",\n\t            \"datePublished\": \"2023-11-04T23:14:00+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:23+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/\"\n\t            },\n\t            \"wordCount\": 716,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"API Integration\\\"\",\n\t                \"\\\"app development\\\"\",\n\t                \"\\\"Deezer API\\\"\",\n\t                \"\\\"frontend development\\\"]\",\n\t                \"\\\"music app\\\"\",\n\t                \"\\\"music streaming\\\"\",\n\t                \"\\\"Vue.js development\\\"]\",\n\t                \"\\\"Web development\\\"\",\n\t                \"[\\\"Music Player App\\\"\",\n\t                \"[\\\"Vue.js\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/\",\n\t            \"name\": \"How to Create a Music Player App with Vue.js and Deezer API - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:14:00+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:23+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Create a Music Player App with Vue.js and Deezer API\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Music Player App with Vue.js and Deezer API - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Music Player App with Vue.js and Deezer API","og_description":"Introduction In this tutorial, we will learn how to create a music player app using Vue.js and the Deezer API. Vue.js is a popular JavaScript framework for building user interfaces, while the Deezer API provides access to a vast library of music tracks. By the end of this tutorial, you Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:14:00+00:00","article_modified_time":"2023-11-05T05:48:23+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Create a Music Player App with Vue.js and Deezer API","datePublished":"2023-11-04T23:14:00+00:00","dateModified":"2023-11-05T05:48:23+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/"},"wordCount":716,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"API Integration\"","\"app development\"","\"Deezer API\"","\"frontend development\"]","\"music app\"","\"music streaming\"","\"Vue.js development\"]","\"Web development\"","[\"Music Player App\"","[\"Vue.js\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/","url":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/","name":"How to Create a Music Player App with Vue.js and Deezer API - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:14:00+00:00","dateModified":"2023-11-05T05:48:23+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-create-a-music-player-app-with-vue-js-and-deezer-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Create a Music Player App with Vue.js and Deezer API"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4016"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=4016"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4016\/revisions"}],"predecessor-version":[{"id":4512,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4016\/revisions\/4512"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=4016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=4016"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=4016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}