为什么我的代码使用 javascript 用于 html5 的音频播放器不能制作两个或更多？

Question

我想用 javascript 制作一些音频播放器，我在 google 上搜索，我明白了，但他们只制作了一个播放器，我想为我的示例制作 4 个音频播放器我网站的演示歌曲，我试过制作两首并更改代码我仍然不能

这是我的代码：

var music = document.getElementById('music'); // id for audio element
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button

var playhead = document.getElementById('playhead'); // playhead

var timeline = document.getElementById('timeline'); // timeline
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// 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(e) {
    return (e.pageX - timeline.offsetLeft) / timelineWidth;
}

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

// Boolean value so that mouse is moved on mouseUp 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(e) {
    if (onplayhead == true) {
        moveplayhead(e);
        window.removeEventListener('mousemove', moveplayhead, true);
        // change current time
        music.currentTime = duration * clickPercent(e);
        music.addEventListener('timeupdate', timeUpdate, false);
    }
    onplayhead = false;
}
// mousemove EventListener
// Moves playhead as user drags
function moveplayhead(e) {
    var newMargLeft = e.pageX - timeline.offsetLeft;
    if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
        playhead.style.marginLeft = newMargLeft + "px";
    }
    if (newMargLeft < 0) {
        playhead.style.marginLeft = "0px";
    }
    if (newMargLeft > timelineWidth) {
        playhead.style.marginLeft = timelineWidth + "px";
    }
}

// timeUpdate 
// Synchronizes playhead position with current point in audio 
function timeUpdate() {
    var playPercent = timelineWidth * (music.currentTime / duration);
    playhead.style.marginLeft = 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);

#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;
    float:left;
    outline:none;
}
.play {
    background: url('http://www.alexkatz.me/codepen/images/play.png');
}
.pause {
    background: url('http://www.alexkatz.me/codepen/images/pause.png');
}
#timeline {
    width: 400px;
    height: 20px;
    margin-top: 20px;
    float: left;
    border-radius: 15px;
    background: rgba(0, 0, 0, .3);
}
#playhead {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-top: 1px;
    background: rgba(0, 0, 0, 1);
}

<audio id="music" preload="true">
    <source src="http://www.alexkatz.me/codepen/music/interlude.mp3">
        <source src="http://www.alexkatz.me/codepen/music/interlude.ogg">
</audio>
<div id="audioplayer">
    <button id="pButton" class="play" onclick="play()"></button>
    <div id="timeline">
        <div id="playhead"></div>
        
<audio id="music" preload="true" src="http://www.alexkatz.me/codepen/music/interlude.mp3">
    <source src="http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3">
</audio>
<div id="audioplayer">
    <button id="pButton" class="play" onclick="play()"></button>
    <div id="timeline">
        <div id="playhead"></div>

谁能解决这个问题？

Answer 1

关于更改 ID 并为您的歌曲添加循环感谢帮助我 post.I 的人 link it

为什么我的代码使用 javascript 用于 html5 的音频播放器不能制作两个或更多？

Why my code using javascript for audio player with html5 can't make two or more?

javascript

html5-audio