样式化HTML5音频播放器

Question

从HTML5音频播放器中我创建了一个时尚的音频播放器，整个设计和功能完美无缺，但我遇到了一个问题。

我将音量位置从垂直变为水平，表示.pageY为.pageX。

现在的问题是，当我从左向右拖动音量时，它会降低音量，当从右向左拖动音量时，会增加音量。

我更改了以下代码：

adjustVolume = function( e )
{
    theRealEvent    = isTouch ? e.originalEvent.touches[ 0 ] : e;
    theAudio.volume = Math.abs( ( theRealEvent.pageY - ( volumeAdjuster.offset().top + volumeAdjuster.height() ) ) / volumeAdjuster.height() );
},

对此：

adjustVolume = function( e )
{
    theRealEvent    = isTouch ? e.originalEvent.touches[ 0 ] : e;
    theAudio.volume = Math.abs( ( theRealEvent.pageX - ( volumeAdjuster.offset().left + volumeAdjuster.width() ) ) / volumeAdjuster.width() );
},

我想要的只是纠正它们，就像它们在其他网站（youtube等）中工作一样

这里是jsFeedle

谢谢！提前。

---

编辑：根据this tutorial教授的剧本，制作我的播放器。

Answer 1

最简单的修复，没有深入研究它的数学：将值设置为1减去你现在计算的值，

theAudio.volume = 1 - Math.abs(…)