【问题标题】：Styling HTML5 Audio Player样式化 HTML5 音频播放器
【发布时间】：2014-05-03 17:04:54
【问题描述】：

从 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 中教的剧本，我制作了我的播放器。

【问题讨论】：

标签： javascript html css

【解决方案1】：

最简单的解决方法，无需深入研究数学：将值设置为 1 减去您现在计算的值，

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

【讨论】：

谢谢！这很简单，但我是 JS 新手，再次感谢。
正如我所说，我没有深入研究您的实际体积计算的数学，包括事件位置、偏移量和宽度……但如果您有一个假定从 0 到 1，然后从 1 到 0……那么使用 1 - (value) 作为实际值自然会更正这一点，这只是基本的简单数学 :-)
谢谢！为您的解释。