main.py
import eel
from pygame import mixer
mixer.init()
eel.init('web')
paused = False
@eel.expose
def play_music(x):
global paused
if paused:
mixer.music.unpause()
paused = False
else:
mixer.music.load(x)
mixer.music.play(-1)
@eel.expose
def queue_music(x):
mixer.music.queue(x)
@eel.expose
def stop_music():
print("Music Stopped")
mixer.music.stop()
@eel.expose
def pause_music():
global paused
paused = True
mixer.music.pause()
eel.start('main.html', size=(999, 999))
main.html
<!DOCTYPE html>
<html>
<head>
<title>Cloudy</title>
<link rel="icon" href="images/favicon.png" type="image/png" sizes="16x16">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Include eel.js - note this file doesn't exist in the 'web' directory -->
<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript">
$(function(){
$("#play").click(function(){
eel.play_music($("#inp").val());
$('#inp').val('');
});
$("#queue").click(function(){
eel.queue_music($("#inp").val());
$('#inp').val('');
});
$("#stop").click(function(){
eel.stop_music();
});
$("#pause").click(function(){
eel.pause_music();
});
});
</script>
</head>
<body>
<div>
<h2>MP3 & WAV player</h2>
<input type='text' id="inp" placeholder='Enter the path to the file . . .' value="Я-женюсь-на-девочке-из-аниме.wav">
<input type='button' class="default" id="play" style="background: blue" value='Play'>
<input type='button' class="default" id="stop" style="background: red;" value='Stop'>
<input type='button' class="default" id="pause" style="background: green;" value='Pause'>
<input type='button' class="default" id="queue" style="background: orange;" value='Queue'>
</div>
</body>
</html>
На всякий случай styles.css
* {
font-family: "Arial";
}
body {
background: #000;
color: #FFF;
}
input {
background: white;
border-radius: 1px;
width: 100%;
padding: 20px;
color: black;
outline: none;
border: none;
display: block;
font-size: 20px;
}
input::placeholder {
color: rgba(0, 0, 0, .5);
}
input[type=text],
input[type=password] {
box-sizing : border-box;
}
.default {
width: 100%;
border-radius: 1px;
margin-top: 10px;
padding: 20px;
color: white;
outline: none;
font-size: 20px;
text-transform: uppercase;
float: left;
}
.default:hover {
opacity: .9;
}
