{"id":16605,"date":"2021-03-04T23:31:36","date_gmt":"2021-03-04T15:31:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16605"},"modified":"2021-03-01T17:58:16","modified_gmt":"2021-03-01T09:58:16","slug":"web-audio-player","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/","title":{"rendered":"How to Create a Custom Audio Player For Your Website"},"content":{"rendered":"<p>I still remember in the early 2000s when playing rich media (audio and video) online came with a lot of constraints. It\u2019s easy to take the beginnings for granted, especially since today, we have many <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/free-music-online\/\" rel=\"noopener\">outlets to play audio<\/a> i.e. last.fm or play video such as Youtube.<\/p>\n<p>In this post, as the title implies, we are going to create Web Audio Player. If you are running a website for podcasting and want to create a media player that will suit your overall web design, this post is probably for you.<\/p>\n<p>Click the Demo button to see how the audio player will look like.<\/p>\n<ul class=\"download download-2c\">\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/web-audio-player\/\">View Demo<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/web-audio-player\/\">Download Source<\/a><\/li>\n<\/ul>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/customize-soundcloud-audio-player-toneden\/\" class=\"ref-block__link\" title=\"Read More: How to Customize SoundCloud Audio Player\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Customize SoundCloud Audio Player<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/customize-soundcloud-audio-player-toneden.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-21555 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/customize-soundcloud-audio-player-toneden.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Customize SoundCloud Audio Player<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAudio streaming have been around on the Internet since 1990 and there are not numerous popular audio streaming...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>What We Need<\/h2>\n<p>Before we create the audio player, we need to prepare some key items for it: the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jplayer.org\">jPlayer<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquery.com\/\">jQuery<\/a> and a font icon set called <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fontawesome.com\/\">FontAwesome<\/a>.<\/p>\n<p>First of all, let\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/jplayer\/jPlayer\">download the jPlayer<\/a>. The jPlayer is a jQuery Plugin that allows us to run rich media on our web page without a hassle. As long as you can HTML and CSS you are ready to go.<\/p>\n<p class=\"note\"><strong>Recommended Reading: <\/strong><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\" rel=\"noopener\">Check out our  HTML\/CSS3 tutorials. <\/a><\/p>\n<p>jPlayer is essentially a jQuery plugin, thus we also need to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jquery.com\/\">download the jQuery<\/a> for it to work, and at the time of the writing jQuery is currently at version 1.8.2. We also need some icons for the media player GUI, and this time we will be using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fontawesome.com\/\">FontAwesome to deliver the icons<\/a>.<\/p>\n<p>After that, we extract all the downloaded files and put all the stuff, including the jPlayer files, the jQuery and the Fonts in an appropriate folder. Then link <code>jquery.js<\/code> and <code>jquery.jplayer.min.js<\/code> to the html document, as follow.<\/p>\n<pre>\r\n&lt;link rel=\"stylesheet\" href=\"css\/normalize.css\"&gt;\r\n&lt;link type=\"text\/css\" href=\"css\/style.css\" rel=\"stylesheet\" \/&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/jquery.jplayer.min.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>As you can see, in addition to jQuery and jPlayer library, we\u2019ve also linked two CSS files in there. The first one <code>normalize.css<\/code> will reset or normalize the browser\u2019s styles, so our web page will be rendered more consistently across the browsers, whilst the second one, <code>style.css<\/code> is where we put our main styles.<\/p>\n<h3>The Audio<\/h3>\n<p>For demonstration in this tutorial, we are going to use the audio from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=dvI5JuB6ThE\">Kelli Anderson<\/a> from her presentaion at TEDx Pheonix. Well, it is actually a video, but you can extract the audio only either through one of the following tools, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/easy-youtube-video-download\/\">Easy Youtube Downloader (FF Extension)<\/a> or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/keepvid.com\/\">KeepVid.com<\/a>.<\/p>\n<h2>Structuring the HTML markup<\/h2>\n<p>Now, it\u2019s time to structure the HTML markup for the audio player and below are the HTML markup we need. The important thing from this markup is the <code>id=jquery_jplayer_1<\/code> attribute that is assigned in the <code>div<\/code> that contains all these. This id is used to link this structure to jPlayer later on through jQuery function.<\/p>\n<p>Furthermore, all the classes assigned on the following structure, including <code>jp-play<\/code>, <code>jp-pause<\/code>, <code>jp-mute<\/code> and <code>jp-unmute<\/code> are all the standard classes used in jPlayer. I suggest that you don\u2019t change these classes as well as the id attribute to make things easier for when we style the audio player later on (unless you really know what you are doing).<\/p>\n<pre>\r\n&lt;div id=\"jquery_jplayer_1\" class=\"jp-jplayer\"&gt;&lt;\/div&gt;\r\n\r\n&lt;div id=\"jp_container_1\" class=\"jp-audio\"&gt;\r\n  &lt;div class=\"jp-type-single\"&gt;\r\n\r\n    &lt;div class=\"jp-title\"&gt;\r\n      &lt;ul&gt;\r\n        &lt;li&gt;TEDxPhoenix - Kelli Anderson - Disruptive Wonder for a Change&lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n\r\n    &lt;div class=\"jp-gui jp-interface\"&gt;\r\n\r\n        &lt;ul class=\"jp-controls\"&gt;\r\n          &lt;li&gt;&lt;a href=\"javascript:;\" class=\"jp-play\" tabindex=\"1\"&gt;&#61515;&lt;\/a&gt;&lt;\/li&gt;\r\n          &lt;li&gt;&lt;a href=\"javascript:;\" class=\"jp-pause\" tabindex=\"1\"&gt;&#61516;&lt;\/a&gt;&lt;\/li&gt;\r\n          &lt;li&gt;&lt;a href=\"javascript:;\" class=\"jp-mute\" tabindex=\"1\" title=\"mute\"&gt;&#61480;&lt;\/a&gt;&lt;\/li&gt;\r\n          &lt;li&gt;&lt;a href=\"javascript:;\" class=\"jp-unmute\" tabindex=\"1\" title=\"unmute\"&gt;&#61478;&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;\/ul&gt;\r\n\r\n        &lt;div class=\"jp-progress\"&gt;\r\n          &lt;div class=\"jp-seek-bar\"&gt;\r\n            &lt;div class=\"jp-play-bar\"&gt;&lt;\/div&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div class=\"jp-time-holder\"&gt;\r\n          &lt;div class=\"jp-current-time\"&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div class=\"jp-volume-bar\"&gt;\r\n          &lt;div class=\"jp-volume-bar-value\"&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n    &lt;div class=\"jp-no-solution\"&gt;\r\n      &lt;span&gt;Update Required&lt;\/span&gt;\r\n      To play the media you will need to either update your browser to a recent version or update your &lt;a href=\"http:\/\/get.adobe.com\/flashplayer\/\" target=\"_blank\"&gt;Flash plugin&lt;\/a&gt;.\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>If you take a closer look at this HTML structure, you will find the following characters <code>&#61515;<\/code>, <code>&#61516;<\/code>, <code>&#61480;<\/code> and <code>&#61478;<\/code>. These characters are special HTML numbers to refer and render the icon characters that come from FontAwesome.<\/p>\n<p>We covered about this subject our previous post: <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-on-off-button\/\" rel=\"noopener\">CSS3 Tutorial: Create A Sleek On\/Off Button<\/a>.<\/p>\n<h2>Activating the Audio Player<\/h2>\n<p>Next, once the HTML markup has been cleared up, we simply need to activate the player with the following script. In this script we provide the audio sources and as you can see below, we have added two sources, <code>mp3<\/code> and <code>oga<\/code>. The <code>oga<\/code> format will extend cross browser compatibility, especially in Firefox and Opera.<\/p>\n<pre>\r\n$(document).ready(function(){\r\n  $(\"#jquery_jplayer_1\").jPlayer({\r\n    ready: function () {\r\n      $(this).jPlayer(\"setMedia\", {\r\n        mp3: \"audio\/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp3\",\r\n        oga: \"audio\/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogg\"\r\n      });\r\n    },\r\n    swfPath: \"\/js\",\r\n    supplied: \"mp3,oga\"\r\n  });\r\n});\r\n<\/pre>\n<p>After we add this script, the audio actually is already playable and if we inspect the HTML markup using Firebug or other Developer Tools, we can find a new <code>&lt;audio&gt;<\/code> HTML5 element  also  generated.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-audio-player\/firebug-audio-html5.jpg\" alt=\"firebug-audio-html5\" width=\"500\" height=\"300\"><\/figure>\n<h2>Styling the Player<\/h2>\n<p>In this section we will start adding styles to make the audio player look better, and we will start off by defining the new font family and removing the underline from the anchor element, like so.<\/p>\n<pre>\r\n@font-face {\r\n    font-family: \"FontAwesome\";\r\n    src: url(\"fonts\/fontawesome-webfont.eot\");\r\n    src: url(\"fonts\/fontawesome-webfont.eot?#iefix\") format(\"eot\"), \r\n    \t url(\"fonts\/fontawesome-webfont.woff\") format(\"woff\"), \r\n    \t url(\"fonts\/fontawesome-webfont.ttf\") format(\"truetype\"), \r\n    \t url(\"fonts\/fontawesome-webfont.svg#FontAwesome\") format(\"svg\");\r\n    font-weight: 400;\r\n    font-style: normal;\r\n}\r\na {\r\n    text-decoration: none;\r\n}\r\n.jp-jplayer,.jp-audio {\r\n    width: 420px;\r\n    margin: 50px auto;\r\n}\r\n<\/pre>\n<h3>Audio Title<\/h3>\n<p>We won\u2019t change this section style heavily, as it only contains the text title of the audio that is being played. We will only make the title text smaller and turn it grey.<\/p>\n<pre>\r\n.jp-title {\r\n    font-size: 12px;\r\n    text-align: center;\r\n    color: #999;\r\n}\r\n\r\n.jp-title ul {\r\n    padding: 0;\r\n    margin: 0;\r\n    list-style: none;\r\n}\r\n<\/pre>\n<h3>GUI Container<\/h3>\n<p>The audio player GUI is contained within a <code>div<\/code> assigned with <code>jp-gui<\/code> class. You can see in the above screenshot how our media player will look like. We apply gradient colors for the GUI theme and we use this color number for the starting color <code>#f34927<\/code>, and <code>#dd3311<\/code> for the end color. Also, make sure that the <code>position<\/code> property for this <code>div<\/code> is defined to <code>relative<\/code>.<\/p>\n<pre>\r\n.jp-gui {\r\n\tposition: relative;\r\n\tbackground: #f34927;\r\n\tbackground: -moz-linear-gradient(top,  #f34927 0%, #dd3311 100%);\r\n\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));\r\n\tbackground: -webkit-linear-gradient(top,  #f34927 0%,#dd3311 100%);\r\n\tbackground: -o-linear-gradient(top,  #f34927 0%,#dd3311 100%);\r\n\tbackground: -ms-linear-gradient(top,  #f34927 0%,#dd3311 100%);\r\n\tbackground: linear-gradient(to bottom,  #f34927 0%,#dd3311 100%);\r\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 );\r\n\t-webkit-box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, .1);    \r\n    box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, .1);\r\n    border-radius: 3px;\r\n\toverflow: hidden;\r\n\tmargin-top: 10px;\r\n}\r\n<\/pre>\n<h3>GUI Control<\/h3>\n<p>The GUI control section contains UI the control the audio, such as the play and pause button, the volume and mute button. in this section, we set the <code>font-family<\/code> property to <strong>FontAwesome<\/strong>, and turn the text color to white as well as add the text shadow.<\/p>\n<pre>\r\n.jp-controls {\r\n    padding: 0;\r\n    margin: 0;\r\n    list-style: none;\r\n    font-family: \"FontAwesome\";\r\n    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);\r\n}\r\n\r\n.jp-controls li {\r\n    display: inline;\r\n}\r\n\r\n.jp-controls a {\r\n    color: #fff;\r\n}\r\n<\/pre>\n<h3>Play and Pause Button<\/h3>\n<p>For the play and pause as well as the volume button, we we will set their <code>position<\/code> to <code>absolute<\/code>, that is why we set <code>.jp-gui<\/code> to relative previously. So, the position of these buttons will be relative to their closer parent rather than the browser window.<\/p>\n<pre>\r\n.jp-play,.jp-pause {\r\n    width: 60px;\r\n    height: 40px;\r\n    display: inline-block;\r\n    text-align: center;\r\n    line-height: 43px;\r\n    border-right: 1px solid #d22f0f;\r\n}\r\n\r\n.jp-controls .jp-play:hover,.jp-controls .jp-pause:hover {\r\n    background-color: #de3918;\r\n}\r\n\r\n.jp-mute,.jp-unmute {\r\n    position: absolute;\r\n    right: 55px;\r\n    top: 0;\r\n    width: 20px;\r\n    height: 40px;\r\n    display: inline-block;\r\n    line-height: 46px;\r\n}\r\n\r\n.jp-mute {\r\n    text-align: left;\r\n}\r\n.jp-time-holder {\r\n    color: #FFF;\r\n    font-size: 12px;\r\n    line-height: 14px;\r\n    position: absolute;\r\n    right: 90px;\r\n    top: 14px;\r\n    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);\r\n}\r\n<\/pre>\n<h3>Progress and Volume Bar<\/h3>\n<p>The progress bar will have a similar look, they are only different in size. The progress obviously should be longer and bigger than the volume bar.<\/p>\n<pre>\r\n.jp-progress {\r\n    background-color: #992E18;\r\n    border-radius: 20px 20px 20px 20px;\r\n    overflow: hidden;\r\n    position: absolute;\r\n    right: 133px;\r\n    top: 15px;\r\n    width: 210px;\r\n    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;\r\n    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;\r\n}\r\n\r\n.jp-play-bar {\r\n    height: 12px;\r\n    background-color: #fff;\r\n    border-radius: 20px 20px 20px 20px;\r\n}\r\n\r\n.jp-volume-bar {\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 17px;\r\n    width: 45px;\r\n    height: 8px;\r\n    border-radius: 20px 20px 20px 20px;\r\n    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;\r\n    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;\r\n    background-color: #992E18;\r\n    overflow: hidden;\r\n}\r\n\r\n.jp-volume-bar-value {\r\n    background-color: #fff;\r\n    height: 8px;\r\n    border-radius: 20px 20px 20px 20px;\r\n}\r\n<\/pre>\n<p>That\u2019s all the codes we need. Now you can see the demo as well as download the source from the following links.<\/p>\n<ul class=\"download download-2c\">\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/web-audio-player\/\">View Demo<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/web-audio-player\/\">Download Source<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>I still remember in the early 2000s when playing rich media (audio and video) online came with a lot of constraints. It\u2019s easy to take the beginnings for granted, especially since today, we have many outlets to play audio i.e. last.fm or play video such as Youtube. In this post, as the title implies, we&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,506,4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create A Sleek Web Audio Player<\/title>\n<meta name=\"description\" content=\"I still remember in the early 2000s when playing rich media (audio and video) online came with a lot of constraints. It&#039;s easy to take the beginnings for\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/\" \/>\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 Custom Audio Player For Your Website\" \/>\n<meta property=\"og:description\" content=\"I still remember in the early 2000s when playing rich media (audio and video) online came with a lot of constraints. It&#039;s easy to take the beginnings for\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-04T15:31:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-audio-player\/firebug-audio-html5.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Create a Custom Audio Player For Your Website\",\"datePublished\":\"2021-03-04T15:31:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/\"},\"wordCount\":933,\"commentCount\":27,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-audio-player\\\/firebug-audio-html5.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"Javascripts\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/\",\"name\":\"How to Create A Sleek Web Audio Player\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-audio-player\\\/firebug-audio-html5.jpg\",\"datePublished\":\"2021-03-04T15:31:36+00:00\",\"description\":\"I still remember in the early 2000s when playing rich media (audio and video) online came with a lot of constraints. It's easy to take the beginnings for\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-audio-player\\\/firebug-audio-html5.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-audio-player\\\/firebug-audio-html5.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-audio-player\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Custom Audio Player For Your Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create A Sleek Web Audio Player","description":"I still remember in the early 2000s when playing rich media (audio and video) online came with a lot of constraints. It's easy to take the beginnings for","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":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Custom Audio Player For Your Website","og_description":"I still remember in the early 2000s when playing rich media (audio and video) online came with a lot of constraints. It's easy to take the beginnings for","og_url":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-03-04T15:31:36+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-audio-player\/firebug-audio-html5.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Create a Custom Audio Player For Your Website","datePublished":"2021-03-04T15:31:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/"},"wordCount":933,"commentCount":27,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-audio-player\/firebug-audio-html5.jpg","keywords":["CSS","HTML","Javascripts"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-audio-player\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/","url":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/","name":"How to Create A Sleek Web Audio Player","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-audio-player\/firebug-audio-html5.jpg","datePublished":"2021-03-04T15:31:36+00:00","description":"I still remember in the early 2000s when playing rich media (audio and video) online came with a lot of constraints. It's easy to take the beginnings for","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-audio-player\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-audio-player\/firebug-audio-html5.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-audio-player\/firebug-audio-html5.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-audio-player\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Custom Audio Player For Your Website"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4jP","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16605"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16605\/revisions"}],"predecessor-version":[{"id":53082,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16605\/revisions\/53082"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16605"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}