HTML5音频播放器的样式

Styling HTML5 Audio Player

本文关键字：样式 播放器 音频 HTML5      更新时间：2023-09-26

我从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

谢谢!提前。

编辑:从本教程中所教的播放中，我制作了我的播放器。

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

theAudio.volume = 1 - Math.abs(…)
相关文章：