Beta testers needed / Play with my app! It's fun!

[Mark_Rocka]

the screen size & format of the phone caused the lyrics and chords above them to not follow the same format, making that copy unusable on that device

You’ve already discovered possibly the biggest pain point both for me and the user. There’s no standard for lyrics sheets. Most of them come from people that just typed it up in Word or Notepad and used spaces to align the chords over the words. I’m working on how to resolve this now. Checking to see what monotype can do for me.

As it is now, the lyrics inputted by user are not visible at all when the music is playing, as far as I can tell.

You’re right, and that might be a serious oversight on my part. Thanks!

Let’s not forget “Simone” is also a mando picker, so it can’t be that bad, right?

DOH! You’re in both camps.

Pic above is android screenshot

Yup, and that’s exactly what I would expect. The Lyrics field has no idea that the line of chords need to be attached to the words they’re above. That’s going to be the hardest aspect of this build. So let me ask you, for lines that are too long, would you prefer them to wrap to the next line, preserving their chords above the words, or would you prefer the app scroll sideways once you’ve mapped the chords above the words to the chords in the chord chart and hit play?

Stay tuned!

[Simone]

So let me ask you, for lines that are too long, would you prefer them to wrap to the next line, preserving their chords above the words, or would you prefer the app scroll sideways

For me, probably the wrap around, & scroll up. Broken down into phrases like where I put the commas & space, i think it’d work. If they didnt kind of follow the phrases, it might be hard to keep the song flowing well while singing and reading and playing. And maybe thats just a me issue…

The original printed sheet i that i currently use is formatted like this (in Word ver 11, @Mike_R , u got me beat!) (pic is below) so it’d fit w the phrases as you sing them, plus has a larger, easier to read text size, that will print onto 1 sheet of paper. I dont like having a song split to another page, again, maybe a just me issue.

Also an option maybe to chk out is taking a text file (Word or otherwise) and running it thru an ascii conversion product to display as in the tab section? Ive no experience w those, I only know that they’re out there. Also idk if they keep desired formats across diff devices or not.

Ive gotta get.my tail on the lawnmower, but when ive a chance, ill test out what happens if type lyrics/chords directly into the app from the phone and see what it renders as on the desktop for curiosity sake. A reverse test if u will, lol.
It’d be good also to see what phone entered data looks like on another portable device such as an iPad or vice versa.

[Mark_Rocka]

probably the wrap around. Broken down into phrases like where I put the commas & space

I don’t think there’s a way to do that and have it look right on every device. There are just too many variables… too many different screen sizes.

The original printed sheet i that i currently use is formatted like this

That’ a good visual. Do you necessarily want the lyrics in 2 columns like that? That would really complicate the build.

running it thru an ascii conversion product

I’m converting the existing Lyrics field to use a monotype font. That way, every space and character are the exact same width. The real problem is that there’s no guarantee that the original text was using a monotype font, so pasting into the Lyrics field is a crap shoot. There’s a real chance some chord spacing will need to occur.

ill test out what happens if type lyrics/chords directly into the app from the phone and see what it renders as on the desktop

Don’t do that just yet. Once I change the format of the Lyrics field, then you can play with it.

My plan is to roll this out in 2 stages. I hope you’ll be available to test it out with me.

Stage 1 - Paste in the Lyrics with chords. Allow the user to adjust the spacing of the chords over the words right in the already existing Lyrics field. Then render that on the main part of the page like we do with Tab View.

Stage 2 - Create some kind of wizard type process that allows the user to tap and place the chords from the chord chart on to the Lyrics. That would allow playback and highlighting of the chords as the proper time in the song.

Stage 2 sounds really cool. I can’t wait to get there.

[davidr1959]

@Mark_Rocka, I received the fourth email today. It also looks great.

[Mark_Rocka]

There’s a 4th?! LOL!

I’d better check and see what that is.

[davidr1959]

Well, you might consider it the third email, it is the 14 day email I believe. I was counting the 1st one as the very first email I received after sign up.

[Mark_Rocka]

OK, Simone. Here’s the quick and dirty Phase 1. Drop your lyrics in the Lyrics field just like before, but just for this test, we’re going to use my test server at this link:

https://cqsys-ares.com/mark_sandbox/app.html

I don’t want to push this to the production site just yet.

Once you’re there, you’ll notice a couple of new buttons under the Lyrics field.

Those are for moving the chords over the proper words in case they get goofy when you paste the lyrics in. You can still use your space bar and back space like normal. The buttons are there for mobile / tablet users.

Once you have the chords placed properly, go to the side bar and turn on Lyrics View.

In Lyrics View, you’ll see the new scroll settings bar.

Buttons to change the text size, the Play button, and the slider to adjust the scroll speed. Give it a spin and let me know what you think.

[Mike_R]

Sweet!

[Simone]

I don’t think there’s a way to do that and have it look right on every device. There are just too many variables… too many different screen sizes

Gotcha…

That’ a good visual. Do you necessarily want the lyrics in 2 columns like that? That would really complicate the build.

Not really interested in 2 column; I tried the 2 column style for some songs a year or so ago, (RWH just happened to be one of them) & I never went back and fixed them. I was experimenting with formats and trying to keep text size as big as possible & also have it fit on 1 page of print. I now have a blank template I made in Word w the font type & size & margins i like. Only rarely do i need to revert back to columns.

This is the basic format most of my songs are in:

They were already formatted in Arial (Monotype), bold, 12 or 14 font size, depending on the wordiness of the song.

OK, So Ive messed around w it some more on the link u provided. Had to dig out my site PW bc its been ages since ive accessed the forum on a PC haha.

Experimented w copy/paste lyrics from my Word doc.
I took the song Blue VA Blues which there is a pic posted above of my orig Word doc.

The nudge buttons didnt respond well on Android. Yes they did nudge the Chord, but kept throwing my “cursor” or live placement on the editor page to a lower line and had to keep going back up to location where I was working (for each incidence of using the nudge) just to see if I had to nudge it some more, only to get thrown back down to a lower line. I had much better response using the controls on my phone (space bar & backspace) - standard phone controls edited the chord spacing as well as kept me in the place of the song that I was editing.

What was cumbersome after pasting the song from Word was that the edit screen on the desktop still was not large enough (left to right) to view one line of the song without scrolling over to the right to see the end, both for viewing lyrics and editing chord placement. used the home/end buttons alot to navigate that. The Lyrics view screen has the +/- font size button which is great & did fit a whole line in the viewing screen, (this feature would be a good addition to the edit screen), but the chords were in the wrong locations in lyric view regardless of +/- font size.

After all the chords for BVAB were edited to be in the correct spots above their respective lyric, I went on to the lyrics view. Unfortunately they got out of place in the transition to the lyrics view. pics below.

I do have something else I’d like to try in regards to the format of the original text I’m copying from Word. I’ll hit that tomorrow with BVAB.

So then I went and tried something different with RWH. I re typed all the lyrics in one large run on sentence w/phrases separated by commas, with the chords appearing like this (B) in front of the word it was supposed to be above. That outcome was that it looked too clustered. Needed a double space between lines. Added a double space between lines in the original Word Doc, copied and pasted to the editor and the result was worse. Would be a better outcome to add those double spaces in the editor, but goes back to being too cumbersome. dont have pics of that yet will have to go back in there & get some if/when I get a chance.

I was thinking, its possible there’s a simple.fix, If a blank Word template or format could be set up that the Editor likes, it would make it easier to copy paste from Word & with good chord placements.

I have not tried notepad as I dont have any songs on that.

The scroll speed bar in lyrics view is sweet & worked good!

[Mark_Rocka]

Thank you Simone! That’s some excellent feedback! I’ve made a TON of changes to this since yesterday.
Still using the test server for now.
https://cqsys-ares.com/mark_sandbox/app.html

First up, the nudge buttons were terrible on mobile. I should have checked that before rolling it out. I went though a few iterations before settling on what you’ll see now.

+/- text size buttons are now available for the text editor. I can’t find a way to wrap lines in the text editor and keep the chord / word connections in tact, so I think this is the best I can do.

I changed it so that you can edit your chord placement right in the rendered Lyrics view area. Just click or tap a chord and then use the nudge buttons in the menu bar.

If a blank Word template or format could be set up that the Editor likes, it would make it easier to copy paste from Word & with good chord placements.

The main problem is the variety of fonts used in the original documents. Even if you had a template with a monospace font, pasting lyrics into it that aren’t monospace will cause the lyric / chord combos to get misaligned. I just don’t think there’s a fix because of the hundreds of fonts that people might have used when originally typing up their lyric sheets. Things are going to get misaligned somewhere.

And that brings me to the biggest improvements of the morning… “Link to Chart” and “Arrange.”

Link to Chart is for when you already have a chord chart set up for the song.

Open the Link to Chart window and you’ll see the song sections from the chord chart on the left. Click the section you want, then you’ll get prompted with every chord change from the chart. For each chord displayed, just click on the letter of the word where that chord starts. After each click, the next chord appears.

Just keep doing that all the way through the song and then save it. It’ll look something like this:

Once you get all of your chord changes linked to the lyrics, then you can create the arrangement. Tap on the Arrange button and set the sequence the song sections should play in.

What’s cool about this is that if you’re using it at a jam (and have a way of keeping everyone in time) you can add in as many breaks as you want right before the song starts. You typically know who will be taking breaks and who won’t, so just add the breaks in as needed, and the lyrics pause while those breaks are happening.

To clear things up, Lyrics now has 2 options for play back. There’s the Scroll button, which just scrolls the lyrics with no music (and you can tap the lyrics to pause scrolling) and now there’s the full playback which you start with the round Play button. The band kicks off and the chords and “/” beat markers highlight to show you where you are in the song.

I’m really interested to get feedback on this. It ended up being WAY more difficult to put together than I thought it would be. I’m not sure it’s done yet, which is why it’s still on the test server. I need some reports before I can call it publishable.

[Mark_Rocka]

This afternoon’s update is just for @Mike_R (but I’m sure others will use it.)

It’s a dedicated metronome page hosted by a very cute Metrognome named Claude Fancypants.

The side bar button that once said “Instrument Tuner” now says “Tools” and that’s where you’ll find this very fancy metrognome. You can adjust volume for the accent, 1/4, 1/8, 1/16, and triplet beats, and there are several beat sounds to choose from. You can even have it auto silence for a specific amount of time or ramp up the tempo.

This was a fun little build after the grueling Lyrics build from yesterday that spilled over into the first half of today.

[Mike_R]

Gracias!

More cowbell!

[Brent.H]

I also noticed the back arrows icon in the op left changed to ‘Songs’ which takes you back to the song list. Is that new or did I miss that from an earlier update.

[Mark_Rocka]

Good eye! It’s a new, necessary change based on the total overhaul I did yesterday for the landing page that you guys never see. I’m trying to reduce the friction of getting someone “in the door” and using the app, so I made 8 songs completely free to play. Now when you hit the login screen, if you don’t have an account, there’s an option to skip login and play the free songs. The first time someone does that, they automatically land on the Cripple Creek page. Because of that, the Back arrow didn’t make sense any more. Too ambiguous.

The other change I made was making “Jam Mode” the default view. After a lot of thought, I felt like dropping people, especially the older pickers, right in the middle of a mess of buttons and options wasn’t the right way to go. Jam Mode is simple. Press Play. Hear a song. Big chord chart. Worry later about what all those buttons do.

So now instead of seeing a Jam Mode toggle in the side bar, you’re just automatically in Jam Mode. The toggle has been replaced by an Edit View toggle.

[Mike_R]

Press Play. Hear a song. Big chord chart. Worry later about what all those buttons do.

Good thought!

[jonny1]

I created an account 40 minutes ago, on iPad, flawless. Playing ‘Little Rabbit’ the forth part is mislabeled F. Should it be D?
Also needed to change the C part to play 4x to match the form I’ve learned.
Love that flexibility.

Great resource. Thanks for the hard work.

[Mark_Rocka]

Good to hear, and thanks for the report. I’m not familiar with that song, so I’ll check it out and get it fixed.

[Mark_Rocka]

Found and fixed the section “F” label. Thanks for pointing that out!

Now for some cool news. I can’t believe I didn’t think of this before now. With a few simple lines of code, the site can now be added to your mobile device’s home screen as an icon so it looks like an app. What’s nice about it is that you lose the URL bar at the top and any browser footer, so you end up with more usable space in the app.

• iOS (Safari only): Share → Add to Home Screen → launches with no browser headers or footers. On iOS, only Safari can create a standalone home-screen app — Brave/Firefox/Edge on iPhone can’t.

• Android (Chrome, Edge, Brave, Samsung Internet): These read manifest.json and will often auto-offer an “Install app” prompt , or you install from the browser menu → Install app / Add to Home screen .
  Launches standalone, no headers or footers.

• Desktop Chrome / Edge: An install icon appears in the address bar ; it installs as its own standalone window. (Desktop Firefox dropped PWA install, so no luck there.)

• macOS Safari (Sonoma+): File → Add to Dock installs it as a web app.

[Brent.H]

Nice! That worked for me via android, added to home from Brave browser.

[Mark_Rocka]

Sweet! I was hoping someone could test it out on an Android. That’s great news!