在 iOS chrome 中播放来自 javascript 的 html5 <audio> 标签
playing html5 <audio> tag from javascript in iOS chrome
更新
问题原来是 Google 驱动器问题。由于某些原因,移动浏览器上的文件需要完全设置为 public 才能使用,而桌面浏览器上的文件可以 "anyone who has the link" 播放。缺乏体面的错误报告使得这很难追踪。
问题:
单击按钮播放 html5 标签在所有桌面浏览器上都能完美运行,但在移动设备 chrome 或 iOS 下的移动 safari 上效果不佳。 (尚未在 android 上测试)。
此示例在我测试过的所有桌面浏览器上都能完美运行,但在 iOS Chrome 或 iOS safari 上无法正常运行。我不知道为什么。我在这里写出了 div 但我正在以编程方式创建它,因为其中可能有一些。为了进行测试,我使用了下面介绍的内容。
DIV:(下面的'myfileidgoeshere'是这里实际去掉的id..)
<div id="user0">
<div><img src="icon.png" class="icon">Title</div>
<div class="buttons">
<div><audio id="player_user0">
<source id="src_user0" src="https://googledrive.com/host/myfileidgoeshere" type="audio/mp3"></audio>
</div>
<button type="button" class="btn" onclick="playUserAudio2(this)">
<span class="glyphicon glyphicon-play white play"></span></button>
</div></div>
播放函数:(因为我是以编程方式编写上面的代码div,所以我必须获取变量。
function playUserAudio2(target) {
var id = $(target).parent().parent().closest('div').attr('id');
var link = $('#src_'+id).attr('src');
var myAudio=document.getElementById('player_'+id);
//some graphical tweaks to show/hide play pause button
var toggle = $(target).find('span.play');
if(toggle.hasClass('glyphicon-play')){
active = $(target).parent().addClass('glow');
toggle.removeClass('glyphicon-play');
toggle.addClass('glyphicon-stop');
myAudio.play();
$('#player_'+id).on("ended", function(){
toggle.removeClass('glyphicon-stop');
toggle.addClass('glyphicon-play');
})
}else{
toggle.removeClass('glyphicon-stop');
toggle.addClass('glyphicon-play');
myAudio.pause();
myAudio.currentTime=0.0; //pause and reset the time to stop.
}
}
问题原来是 Google 驱动器问题。由于某些原因,移动浏览器上的文件需要在 Google 驱动器上完全设置为 public 才能使用,而桌面浏览器上的文件可以使用 "anyone who has the link" 播放。移动设备上缺乏适当的错误报告使得很难追踪。
更新 问题原来是 Google 驱动器问题。由于某些原因,移动浏览器上的文件需要完全设置为 public 才能使用,而桌面浏览器上的文件可以 "anyone who has the link" 播放。缺乏体面的错误报告使得这很难追踪。
问题: 单击按钮播放 html5 标签在所有桌面浏览器上都能完美运行,但在移动设备 chrome 或 iOS 下的移动 safari 上效果不佳。 (尚未在 android 上测试)。
此示例在我测试过的所有桌面浏览器上都能完美运行,但在 iOS Chrome 或 iOS safari 上无法正常运行。我不知道为什么。我在这里写出了 div 但我正在以编程方式创建它,因为其中可能有一些。为了进行测试,我使用了下面介绍的内容。
DIV:(下面的'myfileidgoeshere'是这里实际去掉的id..)
<div id="user0">
<div><img src="icon.png" class="icon">Title</div>
<div class="buttons">
<div><audio id="player_user0">
<source id="src_user0" src="https://googledrive.com/host/myfileidgoeshere" type="audio/mp3"></audio>
</div>
<button type="button" class="btn" onclick="playUserAudio2(this)">
<span class="glyphicon glyphicon-play white play"></span></button>
</div></div>
播放函数:(因为我是以编程方式编写上面的代码div,所以我必须获取变量。
function playUserAudio2(target) {
var id = $(target).parent().parent().closest('div').attr('id');
var link = $('#src_'+id).attr('src');
var myAudio=document.getElementById('player_'+id);
//some graphical tweaks to show/hide play pause button
var toggle = $(target).find('span.play');
if(toggle.hasClass('glyphicon-play')){
active = $(target).parent().addClass('glow');
toggle.removeClass('glyphicon-play');
toggle.addClass('glyphicon-stop');
myAudio.play();
$('#player_'+id).on("ended", function(){
toggle.removeClass('glyphicon-stop');
toggle.addClass('glyphicon-play');
})
}else{
toggle.removeClass('glyphicon-stop');
toggle.addClass('glyphicon-play');
myAudio.pause();
myAudio.currentTime=0.0; //pause and reset the time to stop.
}
}
问题原来是 Google 驱动器问题。由于某些原因,移动浏览器上的文件需要在 Google 驱动器上完全设置为 public 才能使用,而桌面浏览器上的文件可以使用 "anyone who has the link" 播放。移动设备上缺乏适当的错误报告使得很难追踪。