所以，我已经开发了一个HTML5 + Javascript音频播放器并在这里有一个可行的解决方案：http://jimkulakowski.com/games/audioPlayer.js/audioPlayer.html
我现在正试图将播放器应用到我的Wordpress网站中，但它无法正常工作。控制台不会报告脚本的任何错误，但它也不会返回日志。有任何想法吗？这是代码：
<!doctype html>
<title>Audio Player</title>
<style>
#audioPlayerWrap {
width: 90%;
height: auto;
background-color: #222;
position: fixed;
padding: 20px 5%;
bottom: 0;
left: 0;
font-family: "Arial", sans-serif;
font-size: 16px;
color: #ccc;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#currentSong {
width: 40%;
}
#audioplayer {
width: 50%;
padding: 0;
position: relative;
display: block;
}
#currentSong,
#audioplayer {
padding: 0;
margin: 0;
margin-right: 10px;
float: left;
display: block;
}
#pButton {
height: 20px;
width: 20px;
padding: 0;
border: none;
background-size: 100% 100%;
background-position: center;
}
.play {
background: url(play.png) no-repeat;
}
.pause {
background: url(pause.png) no-repeat;
}
.play,
.pause {
float: left;
display: inline-block;
margin-top: 0;
margin-right: 10px;
opacity: 0.75;
}
#timeline {
width: 70%;
height: 10px;
background-color: #444;
margin-top: 5px;
margin-right: 10px;
float: left;
border-radius: 15px;
}
#playhead {
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: -4px;
background-color: #ddd;
box-shadow: 5px 0px 5px #333;
}
#time {
float: left;
margin-top: 3px;
display: inline-block;
font-size: 12px;
}
#exitPlayer {
position: fixed;
right: 0;
bottom: 0;
font-size: 20px;
padding: 17px 20px;
color: #aaa;
background-color: #333;
cursor: pointer;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#exitPlayer:hover {
color: #fff;
background-color: #D22929;
}
#playlist {}
.song-link {
margin-bottom: 10px;
cursor: pointer;
}
.song-link:hover {
color: red;
}
</style>
<audio id="music">
<source id="mp3Source" src="#" type="audio/mpeg" />
</audio>
<div id="audioPlayerWrap">
<div id="currentSong"></div>
<div id="audioplayer">
<button id="pButton" class="play"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
<div id="time"></div>
<div id="exitPlayer">X</div>
</div>
</div>
<div id="playlist">
<div class="song-link" data="vice-avenue-demo-80k.mp3">Vice Avenue</div>
<div class="song-link" data="icicle-drive-ext-loop-80k.mp3">Icicle Drive</div>
</div>
<script>
// Store elements
var audioPlayerWrap = document.getElementById('audioPlayerWrap');
var audio = document.getElementsByTagName('audio');
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
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth; // timeline width adjusted for playhead
var onplayhead = false; /// Boolean value so that mouse is moved on mouseUp only when the playhead is released
var time = document.getElementById("time");
var exitPlayer = document.getElementById('exitPlayer');
var currentSong = document.getElementById('currentSong');
var audioSource = document.getElementById('mp3Source');
var songLink = document.getElementsByClassName("song-link");
// Event listeners
// Play/Pause button
pButton.addEventListener("click", pButtonClick, false);
// timeupdate event listener
music.addEventListener("timeupdate", timeUpdate, false);
// Gets audio file duration
music.addEventListener("canplaythrough", function() {
duration = music.duration;
}, false);
//Makes timeline clickable
timeline.addEventListener("click", function(event) {
moveplayhead(event);
music.currentTime = duration * clickPercent(event);
}, false);
// Makes playhead draggable
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
// Exit button listener
exitPlayer.addEventListener("click", function() {
// Hide audio player
audioPlayerWrap.style.opacity = 0;
music.pause();
});
// Song link listener
// Get url and update audio src
var getData = function() {
// Store attributes
var songURL = this.getAttribute('data');
var songName = this.innerHTML;
// Set new attributes
audioSource.setAttribute("src", songURL);
currentSong.innerHTML = 'Now Playing ' + '"' + songName + '"';
// Load and play audio
music.load();
playAudio();
console.log('play audio');
// Make audio player visible
audioPlayerWrap.style.opacity = 1;
}
for (var i = 0; i < songLink.length; i++) {
songLink[i].addEventListener("click", getData, false);
}
// Add play/pause spacebar funtionality
window.addEventListener("keydown", function() {
if (event.keyCode === 32) {
playAudio();
// Make audio player visible
audioPlayerWrap.style.opacity = 1;
}
});
// Functions
//Play and Pause
function playAudio() {
// 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";
}
}
// pButton click handler
function pButtonClick() {
playAudio();
console.log('clicked play');
}
// returns click as decimal (.77) of the total timelineWidth
function clickPercent(e) {
return (e.pageX - timeline.offsetLeft) / timelineWidth;
}
// mouseUp handler
// 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 handler
// 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";
}
}
// mouseDown handler
function mouseDown() {
onplayhead = true;
window.addEventListener('mousemove', moveplayhead, true);
music.removeEventListener('timeupdate', timeUpdate, false);
}
// timeUpdate
// Synchronizes playhead position with current point in audio
function timeUpdate() {
var playPercent = timelineWidth * (music.currentTime / duration);
playhead.style.marginLeft = playPercent + "px";
// Check if music has ended
if (music.currentTime === duration) {
pButton.className = "";
pButton.className = "play";
audioPlayerWrap.style.opacity = 0;
}
// Update timer
time.innerHTML = readableDuration(music.currentTime);
}
// Convert time to readable format
function readableDuration(seconds) {
sec = Math.floor(seconds);
min = Math.floor(sec / 60);
min = min >= 10 ? min : '0' + min;
sec = Math.floor(sec % 60);
sec = sec >= 10 ? sec : '0' + sec;
return min + ':' + sec;
}
</script>