janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

More pages, some finished

Browse Source
This commit is contained in:
Admin
2025-06-25 11:13:15 +02:00
parent cf31a03582
commit 9880084841
11 changed files with 361 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
site/src/projects/musicplayer/index.html
View File

@@ -5,22 +5,24 @@
<!-- CSS -->
<link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/side-by-side.css">
<!-- SEO -->
<title>MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com</title>
<title>MusicPlayer - Fully browser based with built-in remote playlist display with animations | janishutz.com
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="software store, donations" />
<meta name="keywords" content="browser-based, music player, remote display" />
<meta name="description"
content="libreevent is a free and open source event management solution that enables you to sell tickets for your next event, including a seat plan and many more settings." />
content="Want to show off what the currently playing song is for your next party? MusicPlayer has a lot of party-oriented features built in!" />
<meta name="og:title"
content="MusicPlayer - Fully browser based with built-in remote playlist display with animations" />
<meta name="og:description"
content="libreevent is a free and open source event management solution that enables you to sell tickets for your next event, including a seat plan and many more settings." />
<meta name="og:image" content="https://static.janishutz.com/seo/projects/store.jpg" />
content="Want to show off what the currently playing song is for your next party? MusicPlayer has a lot of party-oriented features built in!" />
<meta name="og:image" content="https://static.janishutz.com/seo/projects/musicplayer.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com/projects/store" />
<meta name="og:url" content="https://janishutz.com/projects/musicplayer" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
@@ -32,38 +34,54 @@
<div class="slider">
<div class="slider-container">
<div class="slider-element current"
style="background-image: url( 'https://static.janishutz.com/assets/store/store-main.jpg' );">
<a href="https://libreevent.janishutz.com" class="button" style="margin-top: 30%;">Project Website</a>
style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-sources.jpg' );">
<div class="slider-info">
<h2>Sources</h2>
<p>Play your local music or use Apple Music (Apple Music Subscription required)</p>
<a href="https://music.janishutz.com/" class="button">Website</a>
</div>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
<h2>Create Events with Ease</h2>
<p>Using the libreǝvent's powerful admin panel</p>
<a href="https://libreevent.janishutz.com/docs/admin-panel/" class="button">Docs</a>
style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-fancy.jpg' );">
<div class="slider-info">
<h2>Shared Playlists</h2>
<p>Seamlessly sync and display what you are currently playing on other devices. Perfect for your
next party!</p>
<a href="https://music.janishutz.com/get" class="button">Get it today</a>
</div>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );">
<h2>Create seat plans</h2>
<p>libreǝvent's seat plan editor is designed to make this as easy as possible</p>
<a href="https://libreevent.janishutz.com/docs/admin-panel/seatplan-editor" class="button">Docs</a>
style="background-image: url( 'https://store-cdn.janishutz.com/assets/musicplayer/musicplayer-player.jpg' );">
<div class="slider-info">
<h2>Browser based</h2>
<p>No need to install anything. Runs on any platform</p>
<a href="https://music.janishutz.com/get" class="button">Get it today</a>
</div>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-all-events.jpg' );">
<h1>Order Tickets</h1>
<p>on this page and give users all important data</p>
<a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-main.jpg' );">
<div class="slider-info">
<h2>Hosted for you</h2>
<p>Need the convenience of an already set up version?</p>
<a href="https://music.janishutz.com/" class="button">Website</a>
</div>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-login.jpg' );">
<h2>User Accounts</h2>
<p>Your customers can do everything in self-service!</p>
<a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-code.jpg' );">
<div class="slider-info">
<h2>Open Source</h2>
<p>Developed by Janis Hutz &amp; the community</p>
<a href="https://github.com/janishutz/MusicPlayerV2" class="button">GitHub</a>
</div>
</div>
<div class="slider-element"
style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );">
<h2>Open Source Project</h2>
<p>Free Software, developed by Janis Hutz & the community</p>
<a href="https://libreevent.janishutz.com" class="button">Learn more about libreǝvent</a>
style="background-image: url( 'https://static.janishutz.com/assets/musicplayer/musicplayer-home.jpg' );">
<div class="slider-info">
<h2>Self-Hostable</h2>
<p>Host it yourself. You need to be member of the Apple Developer Program for access to the Apple
Music API</p>
<a href="https://github.com/janishutz/MusicPlayerV2/wiki/Installation" class="button">Docs</a>
</div>
</div>
</div>
<span class="slider-controls slider-control-left material-symbols-outlined"
@@ -71,38 +89,58 @@
<span class="slider-controls slider-control-right material-symbols-outlined"
onclick="sliderControl( 'next' )">arrow_forward
</div>
</div>
<div class="content">
<img src="https://github.com/janishutz/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer logo" class="project-logo">
<img src="https://github.com/janishutz/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer logo"
class="project-logo">
<h1>Music&shy;Player</h1>
<a href="/projects" class="back-button">&leftarrow; All projects</a>
<p>Play music fully in the browser and remotely share what you are currently playing. Perfect for your next party!</p>
<p>Play music fully in the browser and remotely share what you are currently playing. Perfect for your next
party!</p>
<a href="https://music.janishutz.com" target="_blank" class="button">Get it today</a>
<hr class="pullquote-lines">
<h3 class="content-title-small">Why use a commercial event management solution, if you can host a more flexible
one yourself?</h3>
<hr class="pullquote-lines">
</div>
<hr class="divider">
<div id="yt-embed"></div>
<h2>Features</h2>
<div class="side-by-side">
<div class="side-by-side-item left">
<h3>Remote Playback Status</h3>
<p>Remotely display what is currently playing via a link you can share. There is an additional link that
can be used to display the same information, but with animations that sync to the music (Microphone
access required on the target device and animations will sync up to the sound audible on that
device)</p>
</div>
<div class="side-by-side-item right">
<h3>Two Sources</h3>
<p>You can choose between two sources for audio: Your local disk or Apple Music and you can mix the two
in a single playlist. Cover Art and song information is fetched from the Apple Music API
automatically if you are using the hosted version or have configured the Apple Music API
authentication tokens</p>
</div>
</div>
<div class="side-by-side">
<div class="side-by-side-item left">
<h3>Fully Featured Player</h3>
<p>All the features you'd expect from a Music Player are present in MusicPlayer. Shuffle, Repeat,
Playlist support, adding more songs to queue, just to name a few, are all present.</p>
</div>
<div class="side-by-side-item right">
<h3>Browser based</h3>
<p>There is no need to install anything. MusicPlayer runs fully in your browser and is thus cross
platform. You could even run it off of your phone, if you wish!</p>
</div>
</div>
<div class="content">
<h2>Project Website</h2>
<p>libreevent has its own project website, where you can learn more about the project, find documentation and a
guide on how to install it.</p>
<a href="https://libreevent.janishutz.com" target="_blank" class="button">Project Website</a>
<a href="https://music.janishutz.com" target="_blank" class="button" style="margin-top: 50px;">Get it today</a>
</div>
<footer></footer>
<script src="https://static.janishutz.com/js/yt-embed.js"></script>
<script src="https://static.janishutz.com/js/slider.js"></script>
<script>
YTEmbed('yt-embed', 'UYMa-xTyZYo');
activateSlider(7500);
</script>
</body>