No volume slider

[ltguillaume]

No volume slider

[xRadio-us]

Sliders take extra screen space. For most people, a simple button or image click
will mostly accomplish the same thing in a smaller space and located anywhere
on the screen that is convenient and uncluttering.

<IMG <BUTTON <DIV <SPAN etc. -- onClick = "volUp()"

var volX = 10;
function volUp() { audio[current].volume = ( volX = volX + 2  % 11 )           / 10; }
function volDn() { audio[current].volume = ( volX = Math.max( 1 , volX - 3 ) ) / 10; }

The above code is to change volume for only the current song. To make it a global
volume change, in music.js, find function play(index) and then

change a.volume = 1; to a.volume = volX / 10; -- Example

[xRadio-us]

I discovered the reason for the "no action" results in Firefox.

To maintain style with the other buttons, I added my volControl button like this:

<button id="volControl"><img src=X onclick="volDn()"><img src=Y onclick="volUp()"></button>

Apparently, Firefox does not allow onClick on images within a button.

I changed it to:

<div id="volControl"><img onclick></div> and added #volControl on two CSS button entry lines.

[ltguillaume]

Yes, I've heard of some issues with playback where there seems to be distortion in the playback. I'm not sure whether a volume slider would do any good there, though: it's the browser's responsibility to play back the audio properly.

Since mobile devices have a volume slider for media and desktop systems also allow to change browser's volume separately, I'm not planning on implementing yet another volume slider (especially since I'm not convinced that it will solve the distortion problem). In fact, the more volume changes between source and output, the more the audio will be negatively influenced.

If you can find anything on the distortion caused by the browser online, please let me know.

[ltguillaume]

@xRadio-us Are you sure the math is correct on that?

[xRadio-us]

I'm not sure what you mean. I wanted to make sure that volume stayed within about 0.1 to 1 range.
I figure that users will typically want to lower volume quicker than raise it, so volX-up is incremented by 2 and volX-down is decremented by 3. It is very simple but it seems to work for me.

UPDATE: after a bit more testing, I decided to change the Down Volume scheme:

volX = Math.max( 1 , volX / 2 ) ) / 10;

[xRadio-us]

Can you point to where I can darken, disable or remove the top icon in the left outside column? Especially with my dark theme, it seems distracting and unaesthetic. IMO, there is already too much stuff, especially with my quirky volume buttons, in the upper left area. Example

I would prefer to move my volume + icon to the upper left side corner of the "cover" image but the top left column icon is just too close and too dominant visually.

UPDATE:

I relocated my volume control buttons BUT I would still like to darken/remove the top left column icon for aesthetic reasons.

[ltguillaume]

music.css: body > div:before {

[ltguillaume]

Those volume buttons on your page don't do a thing currently (in Waterfox, on W10).

[xRadio-us]

Works fine in Chrome but I just tried in Firefox and, as you said, the volume buttons are inactive.

[xRadio-us]

re: music.css - thanks, for now I just covered it

<img src="img/one-black.gif" 
     style="z-index:999;position:absolute;top:.75em;left:.75em;height:20px;width:20px;">

[ltguillaume]

So basically you're censoring with a black bar! Like MFP is a bloody criminal! :-P

[xRadio-us]

well, more of a black square (as authorized by Mike Pence) ... ;-)

Maybe I should get creative and put some tiny colorful thing in its place.

[ltguillaume]

My my... :-P

But seriously though, if you just want the first one to disappear, remove #player:before { content: "\f153" } from the CSS.

[xRadio-us]

Thanks. BTW, I moved the side icons down slightly to line up better (for me) with the different sections. Is this placement still okay in Waterfox, etc. or is this placement browser dependent?

[ltguillaume]

[xRadio-us]

Thanks again, It looks like I might have to adjust the button font-sizes (or padding) down slightly to avoid wrapping.,

[ltguillaume]

Guess you'd better remove text-shadow: .5px .5px #ddd; from body > div:before {, too.

[xRadio-us]

I decided to hide Volume Control buttons for phones. Smartphone hardware buttons should be enough.

@media screen and (max-width: 600px) {
    ... etc etc etc
    #volControl { display:none }
}

Why Firefox does not react to volume buttons - maybe change how audio[current].volume is referenced?

[ltguillaume]

Either way, both volUp() and volDn() aren't using proper calculations. You'll leave the volume at 0.1 minimal and when you press volUp() it won't go back to 1.

Why don't you just use

function volUp() {
  audio[current].volume = Math.min((10 * audio[current].volume + 1) / 10, 1);
  console.log("Volume = "+ audio[current].volume);
}

function volDn() {
  audio[current].volume = Math.max((10 * audio[current].volume - 1) / 10, 0);
  console.log("Volume = "+ audio[current].volume);
}

(The * 10, then / 10 seems stupid, but it handles rounding errors, so the volume won't be set to 0.70000001 or something).

[xRadio-us]

My real world experience in Chrome would suggest that it works just fine, as intended, and it does go back to or near 1. But thanks, anyway.

Theoretically, looking closer, as written with MOD 11, going up from 0.1, it should go 0.3 to 0.5 to 0.7 to 0.9 to 0 However, for whatever reason, that last step to 0 does not seem to happen in Chrome.

[ltguillaume]

Your use of MOD is wrong:

volX = 10;       // max = 10
10
( volX = volX + 2  % 11 )
12
( volX = volX + 2  % 11 )
14

[ltguillaume]

Also, ( volX = Math.max( 1 , volX - 3 ) will have 1 as the lowest value, which means the volume will always stick to 1/10 = 0.1 and never get to 0.

[xRadio-us]

Yes, I originally tried volX * 1.2 % 11 and the MOD operator was effective but the results were not actually what I had intended. On a subsequent test, when I just plugged in addition instead of multiplication, I neglected to add parentheses (volX + 2).

This resulted in MOD taking precedence over addition so that the upward calculation result hit the browser/HTML5 volume ceiling at 1 (volX == 10) and stayed there. It was actually a happy accident that ironically made the actual practical results work as desired despite the error.

FYI: the down calculation did what I wanted with a lower limit of 0.1 - I did not want to mute the sound. Unintended (or forgotten) muting tends to frustrate users. However, I did change the lower limit to 0.05.

So, "for now" I will go with "what works". After I do some tests/mods in other areas, I will look at your suggested replacements. I removed % MOD altogether. It was not needed to get the desired results,

[ltguillaume]

Cool! Good luck!