Git Product home page Git Product logo

spotifykaraoke's Issues

Karaoke mode doesn't match song position

Sometimes the scrolling doesn't quite keep up with the pace of the song. In these cases, it would be helpful to allow the user to scroll to the point in the song that's relevant.

This is technically possible but it looks like the autoscrolling is going to an absolute percentage of the page based on the progress of the song, which essentially nullifies the user's scrolling after a second or two.

Potential solutions

There isn't a perfect solution to this (without extensive work) but the following could help:

  • Scroll relative to the current page's scroll position. This would allow the user to scroll to catch up to where the lyrics actually are and then the (dumb) autoscroller just attempts to scroll from that point in the song.
  • Add some buffer to the start of each song before you begin autoscroll to account for some intro time. You never know if a song has an intro before the lyrics start or how long that would be but a short buffer could be safe and helpful.
  • Add padding at the end of the song so autoscroll gets to the end of the page several seconds before the end of the song. If you're at the bottom of the page, you should still be able to see the previous 10-20 lines of lyrics so you're safe to be sitting at the bottom for a certain period of time.

Workaround

Decrease the font size in your browser ๐Ÿ˜„

Steps to reproduce

Song: Stitches - Seeb Remix (Shawn Mendes, Seeb)
OS: macOS (15" Macbook Pro)
Browser: Firefox Developer Edition (77.0b3)

Can you improve it a little?

Hey. I really like your app. But I beg you to add the ability to rewind, by clicking on the playback bar (as it works in any player) and pause button. Just, you know, it's a little inconvenient when I listening a song with lyrics, want to rewind, and I have to open Spotify and then go back....

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.