播放HTML5音頻播放器JavaScript時出錯
[英]Error playing HTML5 audio player javascript
問題描述
我正在嘗試讓根目錄中的mp3文件sleepAway.mp3與index.html文件一起播放，但是沒有聲音。 這就是我所知道的：sleepAway.mp3根據此取消的GET方法，其中還包括我遇到的其他錯誤。 單擊此處查看我的錯誤： http : //postimg.org/image/fjtc0jwff/這是我的代碼：
的index.html
<!DOCTYPE html>
<html ng-app ="plunker">
<head>
<title>app</title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link href="menu_source/styles.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="music.js"></script>
<script src="example.js"></script>
<script src="javascript/main.js"></script>
<script src="angular.min.js"></script>
<script>
angular.module('myModule', ['ui.bootstrap']);
var player;
var intv;
var slider;
window.onload = function () {
document.getElementById('btnPlay').addEventListener('click', playMusic, false);
document.getElementById('btnPause').addEventListener('click', playMusic, false);
document.getElementById('btnStop').addEventListener('click', playMusic, false);
document.getElementById('btnVolUp').addEventListener('click', playMusic, false);
document.getElementById('btnVolDown').addEventListener('click', playMusic, false);
player = document.getElementById('player');
slider = document.getElementById('sliderTime');
slider.addEventListener('change', reposition, false);
getMusicList();
}
function reposition() {
player.currentTime = slider.value;
}
function volUp(){
if(player.volume < 1){
player.volume += 0.1;
console.log(player.volume);
}else{
player.volume = 1;
}
}
function volDown(){
if(player.volume > 0){
player.volume -= 0.1;
console.log(player.volume);
}else{
player.volume = 0;
}
}
function playMusic() {
player.play();
intv = setInterval(update, 100);
slider.max = player.duration;
}
function update(){
document.getElementById('songTime').innerHTML = millisToMins(player.currentTime);
slider.value = player.currentTime;
}
function pauseMusic() {
player.pause();
clearInterval(intv);
}
function millisToMins(seconds){
var numminutes = Math.floor ((((seconds % 31536000) % 86400) % 3600) / 60);
var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60;
if (numseconds >= 10){
return "Time Elapsed:" + numminutes + ":" + Math.round(numseconds);
}else
{
return "Time Elapsed: " + numminutes + ":0" + Math.round(numseconds);
}
}
function stopMusic() {
player.plause();
player.currentTime = 0;
clearInterval(myInterval);
}
function getMusicList(){
var parser = new DOMParser();
xmlDocument = parser.parseFromString(xml, "text/xml");
var elementsArray = xmlDocument.documentElement.getElementsByTagName('composition');
var arrayLength = elementsArray.length;
var output = "<table>";
for(var i = 0; i < arrayLength; i++){
var title = elementsArray[i].getElementsByTagName('title')[o].firstChild.nodeValue;
var composer = elementsArray[i].getElementsByTagName('composer')[0].firstChild.nodeValue;
var time = elementsArray[i].getElementsByTagName('time')[0].firstChild.nodeValue;
var fileName = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue;
output += "<tr>";
output += ("<td onclick='songSelect(\"" + fileName + "\")'>" + title + " By: " + composer + "</td>");
output += "</tr>"
}
output += "</table>";
document.getElementById('musicList').innerHTML = output;
}
function songSelect(fn)
{
document.getElementById('player').src = fn;
playMusic();
}
</script>
<style>
#musicList td{
border: 1px solid black;
padding:3px;
}
#musicList td:hover{
background-color:#990000;
color:white;
}
</style>
</head>
<body>
<div id="content">
</div>
<div id="content1">
<div id="audioPlayer">
<audio id="player">
<source src="sleepAway.ogg" type="audio/ogg">
<source src="sleepAway.mp3" type="audio/mpeg">
</audio>
<button id="btnPlay">Play</button>
<button id="btnPause">Pause</button>
<button id="btnStop">Stop</button>
<button id="btnVolUp">Volume Up</button>
<button id="btnVolDown">Volume Down</button>
<span id="songTime"></span>
<input id="sliderTime" type="range" min="0" value="0" />
<div id="musicList"></div>
</body>
</html>
music.js
var xml='<?xml version="1.0"?>';
xml +='<music>';
xml +=' <composition>';
xml +=' <title>O Mio Babbino Caro</title>';
xml +=' <composer>Puccini</composer>';
xml +=' <time>2:12</time>';
xml +=' <filename>SleepAway.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <title>2:57</time>';
xml +=' <filename>gershwin.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <title>The Man I Love</title>';
xml +=' <composer>Gershwin</composer>';
xml +=' <time>2:57</time>';
xml +=' <filename>gershwin.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <title>2:57</time>';
xml +=' <filename>gershwin.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +=' <titleAllegro</title>';
xml +=' <composer>Beethoven</composer>';
xml +=' <time>3:45</time>';
xml +=' <filename>piano.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
1 個解決方案
解決方案1
1 2014-01-29 20:38:55
您已經嘗試使用角度代碼之后，正在加載角度庫。 您需要將<script src="angular.js"></script>移到開始angular.module位置之前。
javascript：HTML5音頻播放器
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.