I've been working on a music player project. You can check out the live version here:
For the music player base, I am utilizing this audio visualizer: https://github.com/DavidLazic/audio-visualizer. My goal is to customize it according to my needs by adding a play icon that appears when the user hovers over the album image (the music player).
However, I encountered an issue where the click event of the music player is linked to the canvas element beneath the play icon. Here's the code snippet:
<div class="playcircle">
<i class="playbtn fa fa-play fa-4x"></i>
<img class="albumcover" src="summer.jpg" alt="Card image cap ">
</div>
<div class="vz-wrapper">
<audio src="summer.mp3" controls id="myAudio"></audio>
<div class="vz-wrapper -canvas">
<canvas id="myCanvas" width="550px" height="420px"></canvas>
</div>
</div>
I tried utilizing a :hover function for the canvas like this:
.playbtn {
opacity: 0;
position: absolute;
top: 0.9em;
left: 1.1em;
}
#myCanvas:hover .playbtn {
opacity: 1;
}
Unfortunately, this approach did not work as the play button did not appear at all. Connecting it to any other div also did not solve the issue.
The crucial aspect is that the user should be able to start the music by clicking anywhere on the album cover. The music player has its own function for handling click events, and making changes to the existing code could potentially break the player entirely. Here's the function:
Visualizer.prototype.bindEvents = function () {
var _this = this;
document.addEventListener('click', function (e) {
if (e.target === _this.canvas) {
e.stopPropagation();
if (!_this.isPlaying) {
return (_this.ctx.state === 'suspended') ? _this.playSound()
: _this.loadSound();
} else {
return _this.pauseSound();
}
}
});
if (_this.autoplay) {
_this.loadSound();
}
return this;
};
I managed to get it to work partially by linking the :hover effect to .playcircle, but then the icon was not clickable to start the music. I attempted to address this by using pointer-events: none;, but it disabled both hovering and clicking on the album cover.
I also experimented with jQuery without success. I tried solutions like this one: Click through div, which seemed promising but didn't yield the desired outcome.
Thank you in advance for any assistance!