HTML音频播放器轨道链接在新浏览器打开
HTML audio player track links opening in new browser
我试图创建一个HTML音频播放器,并有一切功能到目前为止。唯一的问题是,当点击播放列表中的曲目时,mp3将在新的浏览器窗口中加载。
当他们播放按钮被点击时(对于当前选择的轨道),它在音频播放器中播放,这就是我想在点击播放列表时发生的所有轨道。
有什么办法解决这个问题吗?
https://jsfiddle.net/47qh28c6/HTML<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">
<img style="float:right;width:150px;" src="images/placer.gif">
<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>
和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();
}
您的代码似乎是正确的。我发现您在问题中分享的JSFiddle的唯一问题,以及在JSFiddle中引起所有麻烦的问题,是您没有包括jQuery库。
由于没有添加库,当init()
函数到达代码audio = $('audio')
:
Uncaught ReferenceError: $ is not defined
,它将停止执行函数中其余的代码,因此影响播放列表内a
s行为的代码将不会被执行,并且正常行为(打开链接)不会被修改。
一旦你添加jQuery库到JSFiddle,播放器似乎工作得很好:https://jsfiddle.net/47qh28c6/3/.
相关文章:
- Cordova RSS馈送的链接不会在外部浏览器中打开
- 将下载链接从web浏览器传递给第三方应用程序
- 链接/按钮从子文件夹下载文件--浏览器只是浏览
- Cordova包装应用程序内部链接加载在应用程序中,外部链接加载在浏览器中
- 来自流星模板的 HTML 图像链接未由浏览器呈现
- 浏览器窗口中的应用内FB页面插件链接
- Angular Marked和Inappbrowser打开系统浏览器中的所有链接
- 转换链接在jsfiddle中有效,但在我的浏览器上无效
- javascript打开外部程序中的链接,而不是浏览器
- 链接适用于所有浏览器,除了 safari(php 代码)
- 在 Chrome 中打开电子邮件中的网址/链接,而不是默认浏览器 IE8
- 浏览器将超链接指定的href解释为完全不同的url
- 在系统浏览器中打开JSON链接-Cordova
- Sencha触摸,在新的浏览器窗口中打开网络链接
- 脚本链接格式以实现跨浏览器兼容性
- 用于浏览器检测和url链接的脚本
- 页面加载时出现浏览器链接 JS 错误
- 如何在mySQL数据库中存储通过浏览器链接传递的数据
- jQuery.getJSON()错误:浏览器链接:调用返回值回调失败:类型错误:无法读取属性'文件'为n
- 浏览器链接:无法调用返回值回调:TypeError:无法读取属性'文件'为null