Question

我正在构建一个简单的JavaScript audiotrack控制器，我不知道我的代码有什么问题。我一直在这里搜索几个小时，我找到了一个简单的代码来完成这项工作。我不得不改变很多东西（由于拼写错误或代码错误），我终于得到了这个：

var TRACKS = [
    {
        id: 0,
        nom: 'Johnny B. Goode',
        autor: 'Chuck Berry',
        src: 'src/johnnybgoode.mp3',
        any: '1955'
    },
    {
        id: 1,
        nom: 'For Your Love',
        autor: 'The Yardbirds',
        src: 'src/foryourlove.mp3',
        any: '1965'
    }
];

var songs = 2;

var Player = function () {
    "use strict";
    var currentPlaying,
        trackListPos,
        trackList,
        source,
        audio;
    
    
    this.getName = function () {
        return currentPlaying.nom;
    };
    
    this.setTrack = function (obj) {
        currentPlaying = obj;
        source.src = obj.src;
        audio.load();
        audio.play();
        return this;
    };
        
    
    this.setTrackList = function (t) {
        trackList = t;
        trackListPos = 0;
        audio = document.getElementById('myAudio');
        source = document.getElementById('audioSource');
        this.setTrack(trackList[trackListPos]);
        return this;
    };
    
    this.play = function () {
        audio.load();
        audio.play();
        return this;
    };
    
    this.stop = function () {
        audio.pause();
        audio.currentTime = 0;
        return this;
    };
    
    this.pause = function () {
        audio.pause();
    };

    this.next = function () {
        if (currentPlaying.id === (songs - 1)) {
            trackListPos = 0;
        } else {
            trackListPos += 1;
        }
        this.setTrack(trackList[trackListPos]);
    };
};

//Initialize
var reprod = new Player();
reprod.setTrackList(TRACKS).play();

function play() {
	"use strict";
	reprod.play();
	document.getElementById("Play").innerHTML = "Pause";
}

function seguent() {
    "use strict";
	reprod.next();
    document.getElementById("titol").innerHTML = "<b>T&iacute;tol:</b>";
}

<audio id="myAudio" controls="controls">
    <source id="audioSource" src="">
    Your browser does not support the audio format.
</audio>
    <nav class="navegador" id="sidebar">
        <div class="playerwrapper">
            <div class="player">
                <p id="titol"></p>
                <p id="autor"></p>
                <p id="any"></p>
                <button type="button" onclick="seguent()">Següent</button>
                <button id="Play" type="button" onclick="play()">Play</button>
            </div>
        </div>
    </nav>

正如你所看到的，有几个按钮可以触发函数play（）和seguent（）（这意味着下一个）。他们似乎没有工作。更改“播放”按钮文本的innerHTML不起作用，但是当我删除“reprod.play（）;”时它确实有效并改变按钮内容。

有人可以解释我的代码究竟发生了什么吗？

（对不起，如果帖子很乏味，这是我在这里的第二篇帖子，我不知道格式化）

感谢您让我知道我可以使用控制台，抛出的错误是：

Uncaught TypeError: Cannot read property 'load' of null
Uncaught TypeError: Cannot set property 'src' of null

Answer 1

观察你的代码，似乎setTrackList(t)所引用的元素在DOM中不存在。我认为您在HTML（<script>标记）中导入此脚本的声明元素位于<body>之前。在调用setTrackList(t)之前，您必须确保已加载DOM内容，因此您可以绑定onload事件来调用它，否则此函数将找不到该元素。

试试这个：

var reprod = new Player();
document.addEventListener("load", function() {
    reprod.setTrackList(TRACKS).play();
});

function play() {
    "use strict";
    reprod.play();
    document.getElementById("Play").innerHTML = "Pause";
}

function seguent() {
    "use strict";
    reprod.next();
    document.getElementById("titol").innerHTML = "<b>T&iacute;tol:</b>";
}

编辑：也许我理解你的问题：构造类（function Player()）的函数的上下文在调用之后立即结束，因此变量被删除。因此，请尝试在this上下文中声明变量。

this.audio = yourValue;

而不是：

var audio = yourValue;

编辑：也许现在它运作良好，try this fiddle。

除了由于缺少曲目而导致的错误，它似乎有效。
这是小提琴的代码：

var TRACKS = [
    {
        id: 0,
        nom: 'Johnny B. Goode',
        autor: 'Chuck Berry',
        src: 'src/johnnybgoode.mp3',
        any: '1955'
    },
    {
        id: 1,
        nom: 'For Your Love',
        autor: 'The Yardbirds',
        src: 'src/foryourlove.mp3',
        any: '1965'
    }
];

var songs = 2;

var Player = function () {

    this.getName = function () {
        return this.currentPlaying.nom;
    };

    this.setTrack = function (obj) {
        this.currentPlaying = obj;
        this.source.src = obj.src;
        this.audio.load();
        this.audio.play();
        return this;
    };


    this.setTrackList = function (t) {
        this.trackList = t;
        this.trackListPos = 0;
        this.audio = document.getElementById('myAudio');
        this.source = document.getElementById('audioSource');
        this.setTrack(this.trackList[this.trackListPos]);
        return this;
    };

    this.play = function () {
        //this.audio.load();
        this.audio.play();
        return this;
    };

    this.stop = function () {
        this.audio.pause();
        this.audio.currentTime = 0;
        return this;
    };

    this.pause = function () {
        this.audio.pause();
    };

    this.next = function () {
        if (this.currentPlaying.id === (songs - 1)) {
            this.trackListPos = 0;
        } else {
            this.trackListPos += 1;
        }
        this.setTrack(this.trackList[this.trackListPos]);
    };
};

//Initialize
var reprod = new Player();
if (document.getElementById("myAudio"))
  reprod.setTrackList(TRACKS).play();
else
  window.addEventListener('load', function() {
      reprod.setTrackList(TRACKS).play();
  });

window.play = function() {
    "use strict";
    reprod.play();
    document.getElementById("Play").innerHTML = "Pause";
}

window.seguent = function() {
    "use strict";
    reprod.next();
    document.getElementById("titol").innerHTML = "<b>T&iacute;tol:</b>";
}

这是HTML：

<audio id="myAudio" controls="controls">
    <source id="audioSource" src="">
    Your browser does not support the audio format.
</audio>
    <nav class="navegador" id="sidebar">
        <div class="playerwrapper">
            <div class="player">
                <p id="titol"></p>
                <p id="autor"></p>
                <p id="any"></p>
                <button type="button" onclick="window.seguent()">Següent</button>
                <button id="Play" type="button" onclick="window.play()">Play</button>
            </div>
        </div>
    </nav>

JavaScript音频播放器

1 个答案: