为什么我的代码使用javascript与html5音频播放器可以'Don’我不能做两个或两个以上
Why my code using javascript for audio player with html5 can't make two or more?
我想用javascript制作一些音频播放器,我在谷歌上搜索并得到了它,但他们只制作了一个播放器,我想为我的网站制作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>
有人能解决这个问题吗?
检查一下,我认为这真的可以帮助你
这是关于更改id并为歌曲添加循环感谢在我的帖子上帮助我的那个人。我只是把它链接到
相关文章:
- JQuery合并了keyup和focusout两个函数
- 如何使用 node.js 比较两个 json 数组
- 为复选框javascript指定两个值
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 单击时切换两个图像
- 我可以'我似乎不知道如何修复javascript中的两个lint.有人能帮我理解吗
- 基于两个条件退出While循环
- 如何在这里将两个值最低的数字相加
- 组合两个javascript函数
- 如何使用offer/answer交换来自两个对等连接的流
- jsf中两个字符串的颜色代码差异
- 加载两个具有相同父密钥名称的json文件
- 在Qualtrics中,介绍如何动态连接两个滑块
- 访问$.ajax()函数中的两个不同数组
- 如何在three.js上添加两个向量
- 如何在datetimepicker中使用两个验证器
- 为什么我的代码使用javascript与html5音频播放器可以'Don’我不能做两个或两个以上
- 两个不同的循环-都是don'不起作用
- 两个函数don't不能一起工作,但不能出错
- 两个相同的.load()don'我不能一起工作