HTML5 音频跳转位置

Question

我最近一直在为 HTML5 音频制作自定义控件，主要使用按钮和范围。我一直在本地测试它，在 Google Chrome 39 上。一切正常。

当我将它上传到我的网站时，我转到了它的网址 (http://barney.sweet.uk.net/byteup/jsfemto/)，然后点击播放。大约六秒后，音频结束（242 秒），播放完毕。本地版本 是同一个文件 ，没有这样做。 Firefox 和 IE 也是一样：在线文件跳转，离线不跳转。

我的问题是文件的在线版本和离线版本完全一样，但在同一个浏览器上它们的工作方式不同。

这是我的 JavaScript 代码：

<script>

    var femtoPlayer = femtoPlayer || {};

    femtoPlayer.init = function() {

        console.log('Welcome to JSFemto, the lightweight music player by ByteUp! Software, now ported to JavaScript!')

        var player = document.getElementById('player'), 
            songProgress = document.getElementById('songProgress'),
            name = document.getElementById('source').getAttribute('src'),
            playing = false,
            duration,
            mousedown;

        player.addEventListener('loadedmetadata', function() {
            duration = this.duration;
            console.log('Song duration is:', duration);
        });

        console.log('JSFemto has loaded:', name);
        document.getElementById('name').innerHTML = name;

        player.addEventListener('timeupdate', function() {
            console.log('Time update to:', this.currentTime);
            var currentTime = this.currentTime / duration;
            if (!mousedown){
                songProgress.value = currentTime;
            }
        });

        document.getElementById('playPauseButton').addEventListener('click', function() {
            if (!playing) {
                player.play();
                console.log('Playing...');
                playing = true;
                document.getElementById('playPauseButton').innerHTML = 'Pause';
            }
            else {
                player.pause();
                console.log('Paused...');
                playing = false;
                document.getElementById('playPauseButton').innerHTML = 'Play';
            }

        });
        document.getElementById('stopButton').addEventListener('click', function() {
            console.log('Stop button clicked');
            player.pause();
            player.currentTime = 0;
            playing = false;
            document.getElementById('playPauseButton').innerHTML = 'Play';
        });

        document.getElementById('volSlider').addEventListener('input', function() {
            console.log('Volume changed');
            player.volume = this.value;
        });

        songProgress.addEventListener('mousedown', function(){
            mousedown = true;
        });
        songProgress.addEventListener('mouseup', function(){
            mousedown = false;
        });

        songProgress.addEventListener('change', function() {
            console.log('Song position changed');
            var position = this.value * duration;
            player.currentTime = position;
            player.play();
            playing = true;
            document.getElementById('playPauseButton').innerHTML = 'Pause';
        });
    };

    console.log('Running function: femtoPlayer.init()')
    femtoPlayer.init();

</script>

这是 HTML 的主要部分：

<audio id="player">
    <source src="My Land.mp3" type="audio/mpeg" id="source" />
</audio>
<div class="playerBorder">
    <div id="name">
        JSFemto
    </div>
    <br>
    <button id="playPauseButton" class="big button">Play</button>
    <button id="stopButton" class="med button">Stop</button>
    <input type="range" class="small range" min="0.0" max="1.0" value="1.0" step="0.05" id="volSlider"  />
    <br>
    <input type="range" class="wide range" min="0.0" max="1.0" value="0" step="0.01" id="songProgress" />
    <br>
</div>

我的代码有问题吗？

Answer 1

我从服务器（http://barney.sweet.uk.net/byteup/jsfemto/My%20Land.mp3）下载了你的MP3文件，文件只有221KB，iTunes播放的方式和你描述的完全一样。

请检查文件上传是否中途损坏

Answer 2

您的密码是：

var currentTime = this.currentTime / duration;

但应该是：

var currentTime = this.currentTime;

无论如何，请记住 currentTime 但从 2013 年起 html5 规范是只读属性，因此即使修复此脚本也无法在 Chrome/Chromium、Opera、等等

HTML5 音频跳转位置

HTML5 audio jumping position

html

javascript

audio