The album-viewer web component fetches and displays albums from a specified Bandcamp artist
The album-viewer web component fetches and displays albums from a specified Bandcamp artist. When you pass an artist name to the component, it will display all the musician's albums in a horizontal scrolling view. Please check the demo site below for an example.
Include the album-viewer component in your HTML file:
<script type="module" src="https://cdn.skypack.dev/album-viewer"></script>You can specify the version of the album-viewer component using the @v^1.0.0 format. This allows you to control which version of the component you are using in your project. No version will default to latest.
Example with Version Specification
<script
type="module"
src="https://cdn.skypack.dev/album-viewer@v^1.0.0"
></script>Replace ^1.0.0 with the desired version number to use a specific version of the component.
Add the album-viewer component to your HTML and pass the Bandcamp artist name as a property:
<album-viewer name="artist name"></album-viewer>Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Album Viewer</title>
</head>
<body>
<album-viewer name="artistName"></album-viewer>
<script type="module" src="https://cdn.skypack.dev/album-viewer"></script>
</body>
</html>name: artist to fetch albums foriframeWidth: The width of the iframes displaying the albums. Default is350px.iframeHeight: The height of the iframes displaying the albums. Default is442px.iframeBorder: The border style of the iframes displaying the albums. Default is0.
Example with Name
<album-viewer
name="onhell"
iframeWidth="400px"
iframeHeight="500px"
iframeBorder="1px solid black"
></album-viewer>The component includes default styles for the horizontal scrolling view. You can customize the styles by targeting the album-viewer component and its internal elements.
album-viewer .album-viewer {
display: flex;
justify-content: top;
overflow-x: auto;
}You can override the default styles by adding custom CSS to your project. For example, to change the background color and add padding:
album-viewer .album-viewer {
background-color: #f0f0f0;
padding: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Album Viewer</title>
<style>
album-viewer {
background-color: #f0f0f0;
padding: 10px;
}
</style>
</head>
<body>
<album-viewer
name="omboi"
iframeWidth="400px"
iframeHeight="500px"
iframeBorder="1px solid black"
></album-viewer>
<script type="module" src="./src/album-viewer.js"></script>
</body>
</html>The album-viewer web component is a simple and effective way to display albums from a Bandcamp artist in a horizontal scrolling view. By passing the artist name as a property, you can easily integrate this component into your web projects.
We are actively working on adding new features and improvements. Here are some of the upcoming features you can expect:
- Vertical Scrolling View: Option to display albums in a vertical scrolling view.
- Customizable Colors: Ability to customize the background and text colors for better integration with your website's theme.
- Pagination: Support for paginating through a large number of albums.
- Loading Indicators: Visual indicators to show loading progress while fetching album data.
- Accessibility Improvements: Enhancements to make the component more accessible to users with disabilities.
We welcome your feedback and suggestions to help us improve this component. Stay tuned for updates!
If you like this web component please take a moment to star this project on GitHub.
