javascript - 阿拉伯语的自定义音频标签

Question

我正在尝试解决阿拉伯语网站的音频标签问题。看来我的js有问题。它适用于 ltr 网站，但对于阿拉伯语则存在问题。如果可以，请检查并帮助我。问题只是当我尝试拖动它遇到问题的圆形按钮时。

var music = document.getElementById('music'); // id for audio element
var duration = music.duration; // Duration of audio clip, calculated here for embedding purposes
var pButton = document.getElementById('pButton'); // play button
var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline
var line = document.getElementById('line'); // 

// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// play button event listenter
pButton.addEventListener("click", play);

// timeupdate event listener
music.addEventListener("timeupdate", timeUpdate, false);

// makes timeline clickable
timeline.addEventListener("click", function(event) {
    moveplayhead(event);
    music.currentTime = duration * clickPercent(event);
}, false);

// returns click as decimal (.77) of the total timelineWidth
function clickPercent(event) {
    return (event.clientX - getPosition(timeline)) / timelineWidth;
}

// makes playhead draggable
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

// Boolean value so that audio position is updated only when the playhead is released
var onplayhead = false;

// mouseDown EventListener
function mouseDown() {
    onplayhead = true;
    window.addEventListener('mousemove', moveplayhead, true);
    music.removeEventListener('timeupdate', timeUpdate, false);
}

// mouseUp EventListener
// getting input from all mouse clicks
function mouseUp(event) {
    if (onplayhead == true) {
        moveplayhead(event);
        window.removeEventListener('mousemove', moveplayhead, true);
        // change current time
        music.currentTime = duration * clickPercent(event);
        music.addEventListener('timeupdate', timeUpdate, false);
    }
    onplayhead = false;
}
// mousemove EventListener
// Moves playhead as user drags
function moveplayhead(event) {
    var newMargLeft = event.clientX - getPosition(timeline);

    if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
        playhead.style.marginRight = newMargLeft + "px";
        line.style.width = newMargLeft + "px";
    }
    if (newMargLeft < 0) {
        playhead.style.marginRight = "0px";
          line.style.width =  "0px";
    }
    if (newMargLeft > timelineWidth) {
        playhead.style.marginRight = timelineWidth + "px";
      line.style.width = timelineWidth + "px";
    }
}

// timeUpdate
// Synchronizes playhead position with current point in audio
function timeUpdate() {
    var playPercent = timelineWidth * (music.currentTime / duration);
    playhead.style.marginRight = playPercent + "px";
   line.style.width = playPercent + "px";
    if (music.currentTime == duration) {
        pButton.className = "";
        pButton.className = "play";
    }
}

//Play and Pause
function play() {
    // start music
    if (music.paused) {
        music.play();
        // remove play, add pause
        pButton.className = "";
        pButton.className = "pause";
    } else { // pause music
        music.pause();
        // remove pause, add play
        pButton.className = "";
        pButton.className = "play";
    }
}

// Gets audio file duration
music.addEventListener("canplaythrough", function() {
    duration = music.duration;
}, false);

// getPosition
// Returns elements left position relative to top-left of viewport
function getPosition(el) {
    return el.getBoundingClientRect().right;
}

#audioplayer{
    width: 480px;
    height: 60px;
    margin: 50px auto auto auto;
  border: solid;
}

#pButton{
    height:60px; 
    width: 60px;
    border: none;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    outline:none;
}

.play{background: url('http://simpleicon.com/wp-content/uploads/play1.png') ;}
.pause{background: url('https://cdn0.iconfinder.com/data/icons/controls-essential/48/v-02-512.png') ;}

#timeline{
    width: 400px;
    height: 20px;
    margin-top: 20px;
    border-radius: 15px;
    background: rgba(0,0,0,.3);
  position: relative;
  overflow: hidden;
 
}

 #timeline:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 20px;
    right: 0;
    background: green;
  }
#playhead{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-top: 1px;
    background: rgba(0, 0, 0,1);
  position: relative;
  z-index: 2;

}

#line {
  background: green;
  height: 20px;
  width: 0;
  position: absolute;
  top: 0;
  right: 10px;
}

<div dir="rtl">
  <audio id="music" preload="true">

            <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3">
    </audio>
<div id="audioplayer">
    <button id="pButton" class="play"></button>
  <div id="timeline">    
          <div id="playhead"></div>
        <div id="line"></div>
  </div>
</div>

</div>

英文版很好用（链接）

标签： javascripthtml5-audio