个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我的本地网络服务器 (OpenWrt) 上有一个 mp3 网络播放器，脚本:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="music.css">
<script src="music.js"></script>
</head>
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist">
<li class="active"><a href="music1.mp3">Music 1</a></li>
<li><a href="music2.mp3">Music 2</a></li>
<li><a href="music3.mp3">Music 3</a></li>
</ul>
</body>
</html>
每当我点击歌曲标题时，它们总是被我的 IDM 捕获，我不想下载歌曲，我只想流式传输它们。我该如何解决这个问题？
我的javascript:
var audio;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .10;
audio[0].play();
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
更新: 伙计们，我从 http://jsfiddle.net/WsXX3/33/ 得到了脚本奇怪的是，当我单击 jsfiddle 中的歌曲标题时，它会播放歌曲，但当我在自己的网络服务器上实现代码时，它会下载歌曲。我应该如何实现脚本？
@gratz 我按照你的建议做了，但仍然没有解决问题，这是我的完整脚本:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#playlist,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var audio;
var playlist;
var tracks;
var current;
$(document).ready(function() {
init();
});
function init(){
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .10;
audio[0].play();
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);
});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),audio[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();
}
</script>
</head>
<body>
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist">
<li class="active"><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a></li>
<li><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a></li>
<li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a></li>
<li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">patrikbkarl chamber symph</a></li>
</ul>
</body>
</html>
最佳答案
脚本似乎失败了，因为您在加载 DOM 之前调用了 init()，因此您引用的元素不存在。如果您查看控制台，您会收到类似这样的错误:“无法将属性‘volume’设置为未定义”，因为在调用 init() 时音频元素不存在。看起来您正在使用 jQuery，因此更改了“init();”这行应该有所帮助:
$(document).ready(function() {
init();
});
关于javascript - 我的 mp3 链接被下载而不是在我的网络播放器上流式传输，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28090379/
24
4
0
我是一名优秀的程序员,十分优秀！