Posts

Music Player WebApp

Estimated read time: 0 min

MusicApp

A Music Player developed using JavaScript, CSS, and HTML. Users can click the Forward play, Backward play, Playlist loop and Shuffle music buttons to change the songs.

Live Demo

Live Demo Link 👈

Landing Page:

Music List:

Mobile View:

Embed MusicApp

Embed this music player to any website:

<iframe src="https://samirpaul1.github.io/music/embed"
    title="Embed MusicApp"
    frameborder="0"
    loading="lazy"
    marginheight="0"
    marginwidth="0"
    width="100%"
    height="223"
    scrolling="no">
</iframe>

About the Author

Software Engineer

Copy

Post a Comment

Enter your comments here...

<!DOCTYPE html><html><head></head><body>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1799749036-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY76DMkt8IEuxPz9rxyU9odtAPlSTQ:1744652169868';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5257584742965664965','//samirpl.blogspot.com/2022/07/music-player.html','5257584742965664965');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '5257584742965664965', 'title': 'Samir Paul', 'url': 'https://samirpl.blogspot.com/2022/07/music-player.html', 'canonicalUrl': 'https://samirpl.blogspot.com/2022/07/music-player.html', 'homepageUrl': 'https://samirpl.blogspot.com/', 'searchUrl': 'https://samirpl.blogspot.com/search', 'canonicalHomepageUrl': 'https://samirpl.blogspot.com/', 'blogspotFaviconUrl': 'https://samirpl.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-CP4QE6ZEV0', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Samir Paul - Atom\x22 href\x3d\x22https://samirpl.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Samir Paul - RSS\x22 href\x3d\x22https://samirpl.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Samir Paul - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/5257584742965664965/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Samir Paul - Atom\x22 href\x3d\x22https://samirpl.blogspot.com/feeds/8284559729021745673/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-8274401353019049', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/b06af935920febda', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '8284559729021745673', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/a/AVvXsEjBQonilCSjxq0h93F-OX-kwwTYBWu-NaEvLMKuZELnx23OdsQ2S1tNoPN39sniseG9rr-qkTneSY7nj9IfahrGEBVCwSsIyaa7l7qyqOLE4tpi17i8XRKHzQ4XXCTuq93s__IONykt6X6olplGEA4WNtJ9I7LjwU2Dx0O9JFPRqcMWEPU5odVe2sEtbA\x3ds72-w597-c-h447', 'postImageUrl': 'https://blogger.googleusercontent.com/img/a/AVvXsEjBQonilCSjxq0h93F-OX-kwwTYBWu-NaEvLMKuZELnx23OdsQ2S1tNoPN39sniseG9rr-qkTneSY7nj9IfahrGEBVCwSsIyaa7l7qyqOLE4tpi17i8XRKHzQ4XXCTuq93s__IONykt6X6olplGEA4WNtJ9I7LjwU2Dx0O9JFPRqcMWEPU5odVe2sEtbA\x3dw597-h447', 'pageName': 'Music Player WebApp', 'pageTitle': 'Samir Paul: Music Player WebApp', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Music Player WebApp', 'description': 'Technical blog for developers. Computer Science, Data Structures Algorithms, Networking, Artificial Intelligence, Coding Interview Prep and many more.', 'featuredImage': 'https://blogger.googleusercontent.com/img/a/AVvXsEjBQonilCSjxq0h93F-OX-kwwTYBWu-NaEvLMKuZELnx23OdsQ2S1tNoPN39sniseG9rr-qkTneSY7nj9IfahrGEBVCwSsIyaa7l7qyqOLE4tpi17i8XRKHzQ4XXCTuq93s__IONykt6X6olplGEA4WNtJ9I7LjwU2Dx0O9JFPRqcMWEPU5odVe2sEtbA\x3dw597-h447', 'url': 'https://samirpl.blogspot.com/2022/07/music-player.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 8284559729021745673}}, {'name': 'widgets', 'data': [{'title': 'License Key', 'type': 'HTML', 'sectionId': 'license', 'id': 'HTML15'}, {'title': 'Samir Paul (Header)', 'type': 'Header', 'sectionId': 'header-title', 'id': 'Header1'}, {'title': 'Find an article...', 'type': 'BlogSearch', 'sectionId': 'header-search', 'id': 'BlogSearch1'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'header-icon', 'id': 'TextList000'}, {'title': 'Contributors', 'type': 'Profile', 'sectionId': 'header-icon', 'id': 'Profile1'}, {'title': 'Additional Menu', 'type': 'PageList', 'sectionId': 'nav-widget-1', 'id': 'PageList002'}, {'title': 'Social Media', 'type': 'LinkList', 'sectionId': 'nav-widget-1', 'id': 'LinkList002'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'nav-widget-2', 'id': 'HTML000'}, {'title': '', 'type': 'Text', 'sectionId': 'top-widget', 'id': 'Text1'}, {'title': 'Pinned Post', 'type': 'FeaturedPost', 'sectionId': 'top-widget', 'id': 'FeaturedPost1', 'postId': '4784586018580339509'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'main-widget', 'id': 'Blog1', 'posts': [{'id': '8284559729021745673', 'title': 'Music Player WebApp', 'featuredImage': 'https://blogger.googleusercontent.com/img/a/AVvXsEjBQonilCSjxq0h93F-OX-kwwTYBWu-NaEvLMKuZELnx23OdsQ2S1tNoPN39sniseG9rr-qkTneSY7nj9IfahrGEBVCwSsIyaa7l7qyqOLE4tpi17i8XRKHzQ4XXCTuq93s__IONykt6X6olplGEA4WNtJ9I7LjwU2Dx0O9JFPRqcMWEPU5odVe2sEtbA\x3dw597-h447', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'share', 'label': ''}, {'name': 'icons', 'label': ''}, {'name': 'labels', 'label': 'in'}]}, {'regionName': 'footer2', 'items': [{'name': 'comments', 'label': 'Comment'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'share', 'label': ''}, {'name': 'icons', 'label': ''}, {'name': 'labels', 'label': 'in'}, {'name': 'comments', 'label': 'Comment'}]}, {'title': 'Categorised Posts', 'type': 'HTML', 'sectionId': 'main-widget', 'id': 'HTML2'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'side-widget', 'id': 'PopularPosts00', 'posts': [{'title': 'Design a system that scales to millions of users on AWS', 'id': 7117207077589512086}, {'title': 'Best Tech Keywords with High Google Adsense CPC', 'id': 2767445044918908409}, {'title': 'Company engineering blog links', 'id': 3048226689514969816}, {'title': 'Design Mint.com', 'id': 3119375959550154552}, {'title': 'Design Pastebin.com (or Bit.ly)', 'id': 3734709060686559042}]}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'side-widget', 'id': 'Label00'}, {'title': 'Table of contents', 'type': 'HTML', 'sectionId': 'side-widget', 'id': 'HTML11'}, {'title': 'Mobile Menu', 'type': 'TextList', 'sectionId': 'mobile-menu', 'id': 'TextList99'}, {'title': 'Made with \u2764\ufe0f by', 'type': 'HTML', 'sectionId': 'footer-widget-1', 'id': 'HTML77'}, {'title': 'Social Media Link', 'type': 'LinkList', 'sectionId': 'footer-widget-1', 'id': 'LinkList1'}, {'title': 'About', 'type': 'LinkList', 'sectionId': 'footer-widget-3', 'id': 'LinkList3'}, {'title': 'Blog', 'type': 'LinkList', 'sectionId': 'footer-widget-4', 'id': 'LinkList4'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'credit-widget', 'id': 'HTML88'}, {'title': 'Back to top', 'type': 'TextList', 'sectionId': 'credit-widget', 'id': 'TextList88'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'error-404', 'id': 'HTML404'}, {'title': 'Cookie Consent', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML21'}, {'title': 'Oops!', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML22'}, {'title': 'Enable JavaScript!', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML25'}, {'title': 'Country Block', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML26'}]}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML15', 'license', document.getElementById('HTML15'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header-title', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch1', 'header-search', document.getElementById('BlogSearch1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList000', 'header-icon', document.getElementById('TextList000'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'header-icon', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList002', 'nav-widget-1', document.getElementById('PageList002'), {'title': 'Additional Menu', 'links': [{'isCurrentPage': false, 'href': '/p/sitemap.html', 'title': 'Sitemap'}, {'isCurrentPage': false, 'href': '/p/disclaimer.html', 'title': 'Disclaimer'}, {'isCurrentPage': false, 'href': '/p/privacy.html', 'title': 'Privacy'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList002', 'nav-widget-1', document.getElementById('LinkList002'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML000', 'nav-widget-2', document.getElementById('HTML000'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text1', 'top-widget', document.getElementById('Text1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost1', 'top-widget', document.getElementById('FeaturedPost1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main-widget', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/595142192-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/3681588378-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'main-widget', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts00', 'side-widget', document.getElementById('PopularPosts00'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label00', 'side-widget', document.getElementById('Label00'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'side-widget', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList99', 'mobile-menu', document.getElementById('TextList99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML77', 'footer-widget-1', document.getElementById('HTML77'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'footer-widget-1', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList3', 'footer-widget-3', document.getElementById('LinkList3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList4', 'footer-widget-4', document.getElementById('LinkList4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML88', 'credit-widget', document.getElementById('HTML88'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList88', 'credit-widget', document.getElementById('TextList88'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'error-404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'addons-widget', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML22', 'addons-widget', document.getElementById('HTML22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML25', 'addons-widget', document.getElementById('HTML25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML26', 'addons-widget', document.getElementById('HTML26'), {}, 'displayModeFull'));
</script>
</body></html>