我有一段时间有这个问题,所以我想我会请求你的帮助.
对于概念验证项目,我使用jPlayer创建了一个仅限HTML 5的last.fm播放器.它适用于Firefox,但在使用Chrome(Chromium)时无法使用html解决方案.
首先,Chrome尝试通过流网址获取mp3文件.在预先缓冲了一点之后,它总是尝试通过发出另一个HTTP请求来读取最后128个字节.现在的问题是last.fm流服务器似乎一次只允许每个文件一个连接,这导致两个http连接都失败.似乎Chrome/Chromium忽略了音频标签的preload ="none"属性.据我所知,标签只是对浏览器的推荐.
普通的mp3文件就像魅力一样.此外,当在浏览器中输入重定向的流式URL时,它开始播放.似乎last.fm使用原始URL作为一次性访问令牌/访问控制过滤器,而解析后的流URL有效一段时间.
有关完整的HTTP标头(已删除cookie),请参阅http://pastebin.com/rBAdL4X8.(由Chromium元素检查员复制).
有没有办法在浏览器中规避这个问题?
我正在学习如何使用jPlayer.我想使用jPlayer 流式传输http://u10.sky.fm:80/sky_the80s音频.
http://www.jplayer.org/1.2.0/demo-08-oggSupportFalse/演示适用于Chrome 9.我尝试使用以下代码片段简化它:
$(document).ready(function() {
$("#jpId").jPlayer( {
ready: function () {
$(this).jPlayer("setFile", "http://mp3-vr-128.as34763.net:80/;stream/1", "http://ogg2.as34763.net/vr160.ogg")
.jPlayer("play");
},
swfPath: "client/js",
volume: 60,
oggSupport: true
});
});
Run Code Online (Sandbox Code Playgroud)
不幸的是,上述方法无效.我确信我失去了一些东西,因为我是jPlayer的新手.
任何帮助表示赞赏.在此先感谢您的帮助.
再次,理想情况下我想流http://u10.sky.fm:80/sky_the80s.
昨晚在https://groups.google.com/forum/?fromgroups#!topic/jplayer/yW7WoYtrxI8上发布.
更新:以下代码片段工作
$(document).ready(function() {
$("#jpId").jPlayer( {
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "http://mp3-vr-128.as34763.net:80/;stream/1",
oga: "http://ogg2.as34763.net/vr160.ogg"
}).jPlayer("play");
debug($(this));
},
supplied: "m4a, oga",
swfPath: "client/js"
});
});
Run Code Online (Sandbox Code Playgroud)
但我仍然无法制作http://u10.sky.fm:80/sky_the80s的作品.
更新2:下面的代码片段在Firefox雷区工作,但并没有在Chrome 9的工作:
$(document).ready(function() {
$("#jpId").jPlayer( {
ready: function () { …Run Code Online (Sandbox Code Playgroud) 有许多可用于HTML5音频的JavaScript库,可以使开发人员的工作更轻松,确保跨浏览器兼容性或支持旧版浏览器的Flash回退.
除了本文之外,我在比较方面没有找到太多的内容.
建议使用以下哪些库以及用于何种目的?在文档和支持方面我可以期待什么(例如:这个库可能留下来吗?)
我不需要UI功能来满足我的需求,而是希望保持简洁.这似乎使Audio5JS成为首选候选人.但是,我想知道这是否是一个明智的选择,因为它似乎没有像jPlayer那样大的社区.
编辑:我只需要根据用户输入播放音频文件(完整和/或部分),并为给定文件循环播放(即:循环文件本身或循环其中的一部分.)
关于如何选择JS库来完成工作的一般准则也将受到欢迎.
我主要想节省自己需要尝试所有这些库(以及更多)以找出他们的专业人士和骗子.
谢谢.
我正在建立一个类似于thefuture.fm的网站.DJ可以上传MP3文件并设置是否只能流式传输或流式传输和下载文件.
访问该网站的访客无需登录即可收听音乐.他们应该能够根据用户设置流式传输/下载这些MP3歌曲.
我正在使用jPlayer播放歌曲.我在网上搜索过但找不到任何解决方案.jPlayer有没有像阻止下载MP3文件的设施?或者有什么方法可以阻止这种情况吗?
实际上这是我第一次使用jplayer插件,所以我需要的是当我点击div时播放声音片段(2秒),我不知道如何使用jplayer!
我还需要在缓存中加载声音片段文件以及页面正在加载,因此当我单击该div时,声音片段会立即播放而不会在单击时加载它
顺便说一下,有没有可能不使用jplayer,jquery可能吗?!
我有一个jPlayer(使用jquery的HTML5歌曲播放器),它开始从一首歌的xx秒播放一首歌.
但问题是它必须首先缓冲XX秒然后开始播放,这是浪费带宽.为什么它从XX秒开始缓冲?
这是我使用的代码:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: playList[0],
volume: CUR_VOL
}).jPlayer("play", 251);
},
swfPath: "js",
supplied: "mp3",
errorAlerts: false
});
Run Code Online (Sandbox Code Playgroud)
编辑
我想要一个避免缓冲前XX秒的答案.
谁能告诉我如何制作这个自动播放?
$(document).ready(function(){
var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
{
m4a:"x.mp3",
oga: "x.ogg"
}, {
cssSelectorAncestor: "#cp_container_1"
});
});
Run Code Online (Sandbox Code Playgroud) 我在我的网站上使用jPlayer 2.7.1(https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.7.1/jquery.jplayer/jquery.jplayer.min.js)为用户播放音轨.音轨来自S3桶.最近,一些通过使用Chrome Mobile 30,44,45的Android WebView访问该网站的用户在播放音频文件时遇到问题.
常见的抱怨似乎是开始播放的曲目的变化,然后在某些时候它会卡住,跳过或滞后于剩余的音频.用户的一些具体引用:
"几分钟后,声音停止并重复同一个词,就像是有点滞后."
"当我按下播放时,录制会以第二个片段播放(有点像是非常慢的加载),非常脱节.时间栏也没有进展,它只是停留在0:00或有时停留在0:01然后再回来,即使它正播放录音的后期部分."
"音频播放几秒钟,停止播放,跳过大量内容,再播放一两秒,停止,跳过等等."
"如果它确实启动它会持续切断/发出噼啪声并且时间不会开始倒计时."
不幸的是,我自己无法重现这个问题.
您认为可能导致此问题的原因是什么?可以转移到jPlayer 2.9.2修复问题吗?
我无法获取由Icecast服务器提供的静态内容(mp3文件)以及使用HTML5在Google Chrome浏览器中播放.我们通过Icecast服务mp3的原因是政策:CPB要求它们"流式传输"而不是"下载",因为我们是公共广播.我们的现场音频流在Chrome中播放得很好.
如果您将我的Icecast 2.4.3服务器提供的MP3的URL直接放入谷歌浏览器的网址栏中,则无法播放.在Firefox,IE,Safari等中做同样的事情.它播放!试试吧:
https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3
(我使用的临时解决方案是Flash,但Chrome的最新更新(v60.0)默认情况下阻止Flash,"始终允许此网站"选项似乎不起作用,并且显示Flash的小图标被阻止的更加离散.请在此处尝试:http://kansaspublicradio.org/kpr-news/midwest-farmers-hope-boost-online-grocery-shopping)
我最好猜测为什么会发生这种情况是因为它与此有关:https://developers.google.com/web/updates/2016/03/play-returns-promise?hl = en
因此,我尝试重现他们的代码示例,其中他们使用HTML5 Media Capture来播放音频,而无需用户交互.但是有了这个音频的URL,它就无法播放并抛出这个错误:Uncaught (in promise) DOMException: The element has no supported sources.尝试一下:https://jsfiddle.net/wo94xohr/2/它只能在Chrome中失败而不是Firefox或其他.
我再次尝试但没有HTML5 Media Capture的东西.仍然没有骰子.试试吧:https://jsfiddle.net/yrhets74/
此外,如果你看一下响应标题,你会看到"内容范围:字节0-0/0"......这是否意味着什么?
更新:我正在测试这是否是CORS(跨源资源共享)问题.我已经将jsfiddle更新为:
var audioElement = document.querySelector('#music');
audioElement.crossOrigin = "anonymous"; // CORS access restriction. Worth a shot but no dice
audioElement.type = "audio/mpeg"; // just in case? idk
audioElement.src = "https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3";
function startPlayback() {
// .play() …Run Code Online (Sandbox Code Playgroud) 我正面临着Firefox 8.0.1的奇怪行为:这段代码在谷歌Chrome和IE中运行良好,但在Firefox上它失败,除非我在"调试模式_一步一步"运行它或者我放了一个在我设置属性"rel"的行之后发出警报...
// some stuff before
// this piece of code works fine excepts on FF
totaltracks = data.length;
j=0;
while(j<totaltracks){
newtrack =data[j];
myPlaylist.add(newtrack);
tracks = $("a.jp-playlist-item");
curtrack = $("a.jp-playlist-item")[j];
$(curtrack).attr({rel:j});
// I tried too : $("a.jp-playlist-item")[j].attr("rel",j); with same no effect on FF
j++;
}
Run Code Online (Sandbox Code Playgroud)
似乎FF只是不照顾指令(或跳转它)如果没有一步一步完成...面对这面墙2天过去...任何帮助/线索/技巧将不胜感激