67 lines
1.7 KiB
HTML
67 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
</head>
|
|
<script src="https://gofly.v1kf.com/static/cdn/jquery/3.6.0/jquery.min.js"></script>
|
|
<style>
|
|
.voice-message {
|
|
height: 35px;
|
|
border: 1px solid #e3e3e3;
|
|
border-radius: 15px;
|
|
box-shadow: 2px 2px 2px rgb(0 0 0 / 10%);
|
|
display: flex;
|
|
align-items: center;
|
|
color: #484848;
|
|
cursor: pointer;
|
|
}
|
|
.voice-message .voice-icon {
|
|
width: 12px;
|
|
margin: 0 5px 0 8px;
|
|
}
|
|
|
|
.voice-message.playing .voice-icon {
|
|
animation: shake 0.5s linear infinite;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="voice-message">
|
|
<img src="http://127.0.0.1:8081/static/images/voice-icon2.png" class="voice-icon"/>
|
|
<span></span>
|
|
<audio src="http://127.0.0.1:8081/static/upload/2022December/528202b061aaa45fadb0e6ec37ed22db.mp3"></audio>
|
|
</div>
|
|
<script>
|
|
const audio = $('.voice-message audio');
|
|
audio.on('playing', () => {
|
|
audio.parent().addClass('playing');
|
|
});
|
|
audio.on('pause', () => {
|
|
audio.parent().removeClass('playing');
|
|
});
|
|
audio.on('loadedmetadata', function() {
|
|
$(this).parent().find("span").text(Math.round(audio[0].duration) + 's');
|
|
});
|
|
const voiceMessage = $('.voice-message');
|
|
voiceMessage.click(() => {
|
|
if (audio[0].paused) {
|
|
audio[0].play();
|
|
} else {
|
|
audio[0].pause();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |