{"id":3827,"date":"2021-09-13T17:12:25","date_gmt":"2021-09-13T17:12:25","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3827"},"modified":"2023-01-21T00:33:06","modified_gmt":"2023-01-21T05:33:06","slug":"building-with-stencil-audio-player-component","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component","title":{"rendered":"Building with Stencil: Audio Player Component"},"content":{"rendered":"

In this tutorial, we are going to build an audio player component using Stencil<\/a>. You\u2019ll be introduced to many fundamental concepts in Stencil and by the end of the tutorial you\u2019ll have a foundational audio player component that you can customize for your own apps.<\/p>\n

Stencil is a great tool for building reusable web components and is especially suitable for building out design systems at scale. Stencil components can be incorporated into many front-end frameworks like React, Angular, and Vue\u2014or no framework at all. By building our audio player with Stencil, we\u2019ll have an incredibly versatile component that we can use anywhere.<\/p>\n

<\/p>\n

Here\u2019s the final audio player component we\u2019ll be building:<\/p>\n

Find all of the code for this tutorial at the Stencil audio player component GitHub repository here<\/a>.<\/p>\n

Set Up Your Stencil Project<\/h2>\n

To create a new Stencil project, we’ll want to open up the terminal and run the following command:<\/p>\n

npm init stencil\n<\/code><\/pre>\n
After running this command, you may be prompted to give permission to install the create-stencil<\/code> package. If so, answer \u201cyes\u201d to the prompt. Next, we’ll be prompted for a starter. Select “component” as that’s what we’ll be building in this tutorial.<\/p>\n
? Pick a starter \u203a - Use arrow-keys. Return to submit.\n\n   app           Minimal starter for building a Stencil app or website\n\u276f  component     Collection of web components that can be used anywhere\n<\/code><\/pre>\n
Next you’ll be prompted for a project name. Feel free to name your project whatever you like. I named mine audio-player-project<\/code>. Once you’ve named your project, you’re all set up and ready to create a component.<\/p>\n
Generate a New Component<\/h2>\n
Once we’ve created the Stencil project and we’ve navigated inside the project directory, we can generate all of the boilerplate code for our component with the following command:<\/p>\n
npm run generate\n<\/code><\/pre>\n
When prompted for the component tag name, feel free to name it whatever you like. Just make sure that the name uses dash-case (includes a hyphen). We’ll be naming the component audio-player<\/code>. After you name the component, press enter again to generate all of the additional files. These files are used for testing and styling. Finally, navigate to src\/components\/audio-player\/audio-player.tsx<\/code> (this will be different if you’ve named your component something else). This audio-player.tsx<\/code> file is the core of our component and we’ll also be using audio-player.css<\/code> for styling.<\/p>\n
Props and State<\/h2>\n
In order to build this component, we need to think of all the required elements. We want to be able to provide any title and audio source for the player. Therefore, we need to use the @Prop<\/code> decorator<\/a> to expose these properties.<\/p>\n
We also need a few pieces of state in our audio player. We want to know the total duration of the audio clip, the current time of the clip, and whether or not the audio is playing or paused. Because each of these aspects can change depending on how the user interacts with the component, we\u2019ll add them as pieces of state with the @State<\/code> decorator<\/a>.<\/p>\n
Finally, we need one last piece of state that we\u2019ll use as a reference to our audio<\/code> element in order to access certain properties of the audio clip. With all of that in mind, we can initialize our props and state.<\/p>\n
Export class AudioPlayer {\n  @Prop() title: string;\n  @Prop() src: string;\n\n  @State() isPlaying: boolean = false;\n  @State() duration: number = 0;\n  @State() currentTime: number = 0;\n  @State() audioPlayer: HTMLAudioElement;\n<\/code><\/pre>\n
Rendering the Audio Player<\/h2>\n
Now that we have all of our properties and states, we can begin to incorporate them into our render function to display them in the component.<\/p>\n
render() {\n  return (\n    <div class="container">\n      <div class="title">{this.title}<\/div>\n      <div class="player">\n        <button class="play-button">\n          {this.isPlaying ? 'Pause' : 'Play' }\n        <\/button>\n        {this.currentTime + "\/" + this.duration}\n        <audio\n          src={this.src}\n          preload="metadata"\n          ref={(el) => this.audioPlayer = el as HTMLAudioElement}\n        >\n          Your browser does not support the HTML5 audio element\n        <\/audio>\n      <\/div>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
Most of the component is simply displaying the values of our props and state. The play button uses conditional rendering to display \u201cplay\u201d or \u201cpause\u201d depending on whether or not the audio is playing. Most importantly, we have the audio<\/code> element at the bottom. Naturally, we set the source to the value of the prop passed into the component. By setting the preload<\/code> attribute to metadata<\/code>, we are specifying that the browser should load the audio metadata on page load. Finally, we use the ref<\/code> attribute to create a reference to the audio<\/code> element.<\/p>\n
Of course, we\u2019ll need to pass in attribute values for our audio-player<\/code> in our index.html<\/code> file.<\/p>\n
  <audio-player title="My Audio Clip" src="https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/Theme-Song-Ferdinand-Souvenir.mp3" \/>\n<\/code><\/pre>\n
Feel free to use whatever audio source you want here.<\/p>\n
Playing Audio<\/h2>\n
Next, we want to add some functionality so we can actually play our audio. Luckily for us, our audio<\/code> element has methods for doing just that. Using our reference to the audio<\/code> element, and making sure to manage our isPlaying<\/code> state, we can create a function to play and pause.<\/p>\n
togglePlay = () => {\n  if (this.isPlaying) {\n    this.audioPlayer.pause();\n    this.isPlaying = false;\n  } else {\n    this.audioPlayer.play();\n    this.isPlaying = true;\n  }\n}\n<\/code><\/pre>\n
Then call that function when our button is pressed.<\/p>\n
<button class="play-button" onClick={this.togglePlay}>\n  {this.isPlaying ? 'Pause' : 'Play' }\n<\/button>\n<\/code><\/pre>\n
Audio Duration<\/h2>\n
Both our duration<\/code> and currentTime<\/code> states will be numbers representing time in seconds. We want to display these values to the user, but we want the time in minutes and seconds. Let\u2019s create a function that takes time in seconds and formats the time in a more human readable way.<\/p>\n
formatTime = (time: number) => {\n  const minutes = Math.floor(time \/ 60);\n  const seconds = Math.floor(time % 60).toLocaleString('en-US', { minimumIntegerDigits: 2 });\n  return minutes + ":" + seconds;\n}\n<\/code><\/pre>\n
toLocaleString<\/code> is a convenient little method that allows us to prepend a 0 when the seconds value is a single digit. This way, one minute and three seconds is \u201c1:03\u201d instead of \u201c1:3\u201d.<\/p>\n
Now let\u2019s use this function to format our times.<\/p>\n
{this.formatTime(this.currentTime) + "\/" + this.formatTime(this.duration)}\n<\/code><\/pre>\n
Now that duration and current time are initialized and formatted, let\u2019s actually set their values. First, we\u2019ll set the duration. This is a property that we can access on our audioPlayer<\/code> element. However, we can only access it after our audioPlayer<\/code> reference has been attached to our audio<\/code> element and the audio metadata has loaded. We can wait for both of those events like so:<\/p>\n
@Watch('audioPlayer')\nwatchAudioPlayerHandler() {\n  this.audioPlayer.onloadedmetadata = () => {\n    this.duration = this.audioPlayer.duration;\n  }\n}\n<\/code><\/pre>\n
Here we use the @Watch<\/code> decorator<\/a> which executes the attached function whenever the specified state changes. In our case, the audioPlayer<\/code> state changes when it becomes a reference to the audio<\/code> element. That change is our cue to grab the audio duration. To do that, we have to ensure the metadata has been loaded and is available, so we use the onloadedmetadata<\/code> method.<\/p>\n
Current Time<\/h2>\n
The currentTime<\/code> is a little more complex because it is constantly changing. For such a situation we can leverage requestAnimationFrame()<\/code> which allows us to make a request to the browser to execute a specific function before the next repaint. The function is passed to requestAnimationFrame()<\/code> as a callback. Most importantly, if that function contains another call to requestAnimationFrame()<\/code>, it will create an animation loop. We\u2019ll do this to continually increment our current time.<\/p>\n
incrementTime = () => {\n  this.currentTime = this.audioPlayer.currentTime;\n  this.stopId = requestAnimationFrame(this.incrementTime);\n}\n<\/code><\/pre>\n
You may be curious about this.stopId<\/code>. This is a number that is returned by requestAnimationFrame()<\/code> to identify the animation request. We can declare it towards the top of our component.<\/p>\n
private stopId: number;\n<\/code><\/pre>\n
And we can use it in our togglePlay<\/code> function to stop the animation:<\/p>\n
togglePlay = () => {\n  if (this.isPlaying) {\n    this.audioPlayer.pause();\n    this.isPlaying = false;\n    cancelAnimationFrame(this.stopId);\n  } else {\n    this.audioPlayer.play();\n    this.isPlaying = true;\n    this.incrementTime();\n  }\n}\n<\/code><\/pre>\n
When we want to play the audio, we call our incrementTime<\/code> function to start the animation loop, and when we pause, we call cancelAnimationFrame<\/code> with our stopId<\/code> to end the animation loop.<\/p>\n
Make it Pretty<\/h2>\n
Our play\/pause button works well, but it doesn’t look great. To use icons instead of text, we must first create a new folder under src<\/code> called assets<\/code>. We then have to reference our assets<\/code> directory in our component.<\/p>\n
@Component({\n  tag: 'audio-player',\n  styleUrl: 'audio-player.css',\n  assetsDirs: ['assets'],\n  shadow: true,\n})\n<\/code><\/pre>\n
Next, we\u2019ll add our play<\/a> and pause<\/a> icons to our assets<\/code> folder. Finally, we can use getAssetPath()<\/code> in an img<\/code> tag to display our icons.<\/p>\n
<div class="play-button" onClick={this.togglePlay}>\n  {\n    this.isPlaying\n      ? <img src={getAssetPath("..\/..\/assets\/pause.svg")} \/>\n      : <img src={getAssetPath("..\/..\/assets\/play.svg")} \/>\n  }\n<\/div>\n<\/code><\/pre>\n
To top it all off, we\u2019ll add some CSS in audio-player.css<\/code>:<\/p>\n
:host {\n  display: block;\n  font-family: sans-serif;\n}\n\n.container {\n  width: fit-content;\n  padding: 12px;\n  border-radius: 8px;\n  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;\n}\n\n.title {\n  font-weight: bold;\n  margin-bottom: 8px;\n}\n\n.player {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.play-button {\n  width: 16px;\n}\n<\/code><\/pre>\n
And there you have it! We\u2019ve built the foundation of an audio player component that you can now add all kinds of exciting features and styles to. Our audio player is one example, but you can build any component you want with Stencil, like a calendar<\/a> or a clock<\/a>. You can then use the components you build to create an entire design system that can be used across different frameworks. Needless to say, we\u2019re excited to see what you decide to create!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, we are going to build an audio player component using Stencil. You\u2019ll be introduced to many fundamental concepts in Stencil and by the end of the tutorial you\u2019ll have a foundational audio player component that you can customize for your own apps. Stencil is a great tool for building reusable web components […]<\/p>\n","protected":false},"author":87,"featured_media":3828,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"21","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[223,124],"tags":[140,76,82],"class_list":["post-3827","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stencil","category-tutorials","tag-design-systems","tag-stencil","tag-web-components"],"acf":[],"yoast_head":"\nBuilding with Stencil: Audio Player Component - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Stencil allows developers to build reusable web components that can be incorporated into front-end frameworks like React, Angular, and Vue.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building with Stencil: Audio Player Component\" \/>\n<meta property=\"og:description\" content=\"Stencil allows developers to build reusable web components that can be incorporated into front-end frameworks like React, Angular, and Vue.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-13T17:12:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-21T05:33:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Anthony Giuliano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@a__giuliano\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anthony Giuliano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component\"},\"author\":{\"name\":\"Anthony Giuliano\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\"},\"headline\":\"Building with Stencil: Audio Player Component\",\"datePublished\":\"2021-09-13T17:12:25+00:00\",\"dateModified\":\"2023-01-21T05:33:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component\"},\"wordCount\":1230,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png\",\"keywords\":[\"Design Systems\",\"stencil\",\"web components\"],\"articleSection\":[\"Stencil\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component\",\"url\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component\",\"name\":\"Building with Stencil: Audio Player Component - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png\",\"datePublished\":\"2021-09-13T17:12:25+00:00\",\"dateModified\":\"2023-01-21T05:33:06+00:00\",\"description\":\"Stencil allows developers to build reusable web components that can be incorporated into front-end frameworks like React, Angular, and Vue.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building with Stencil: Audio Player Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58\",\"name\":\"Anthony Giuliano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg\",\"caption\":\"Anthony Giuliano\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/anthonygiuliano1\/\",\"https:\/\/x.com\/a__giuliano\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/anthonyionic-io\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building with Stencil: Audio Player Component - Ionic Blog","description":"Stencil allows developers to build reusable web components that can be incorporated into front-end frameworks like React, Angular, and Vue.","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:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component","og_locale":"en_US","og_type":"article","og_title":"Building with Stencil: Audio Player Component","og_description":"Stencil allows developers to build reusable web components that can be incorporated into front-end frameworks like React, Angular, and Vue.","og_url":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component","og_site_name":"Ionic Blog","article_published_time":"2021-09-13T17:12:25+00:00","article_modified_time":"2023-01-21T05:33:06+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png","type":"image\/png"}],"author":"Anthony Giuliano","twitter_card":"summary_large_image","twitter_creator":"@a__giuliano","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Anthony Giuliano","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component"},"author":{"name":"Anthony Giuliano","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58"},"headline":"Building with Stencil: Audio Player Component","datePublished":"2021-09-13T17:12:25+00:00","dateModified":"2023-01-21T05:33:06+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component"},"wordCount":1230,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png","keywords":["Design Systems","stencil","web components"],"articleSection":["Stencil","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component","url":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component","name":"Building with Stencil: Audio Player Component - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png","datePublished":"2021-09-13T17:12:25+00:00","dateModified":"2023-01-21T05:33:06+00:00","description":"Stencil allows developers to build reusable web components that can be incorporated into front-end frameworks like React, Angular, and Vue.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/building-with-stencil-audio-player-component#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Building with Stencil: Audio Player Component"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/a3190e4d49187220d0c720f2ceab9b58","name":"Anthony Giuliano","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/10\/anthony-giuliano-profile-cropped-150x150.jpeg","caption":"Anthony Giuliano"},"sameAs":["https:\/\/www.linkedin.com\/in\/anthonygiuliano1\/","https:\/\/x.com\/a__giuliano"],"url":"https:\/\/ionic.io\/blog\/author\/anthonyionic-io"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/stencil-audio-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3827"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3827\/revisions"}],"predecessor-version":[{"id":4717,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3827\/revisions\/4717"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3828"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}