javascript - 样式化 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(…)