使用 jquery 和 HTML5 音频标签切换音频源 [英] switch audio source with jquery and HTML5 audio tag
本文介绍了使用 jquery 和 HTML5 音频标签切换音频源的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我只找到了另一种解决方案,但它不完整,所以我在这里需要帮助.
我设置了音频:
我有一个动态生成的链接表来更改轨道:
<a href="#" class="track" data-location="http://www.newoggtrack.ogg">sample</a>
我有这个 jquery,我不知道如何改变轨道
$('.track').click(function(){load_track = $(this).attr('data-location');//获取新曲目的urlchange_track(load_track);//函数改变加载的音频播放器的轨迹,无需页面刷新首选...});
我找到了这个功能,但我没有正确使用它
function change_track(sourceUrl) {音频.空();$("#ogg_src").attr("src", sourceUrl).appendTo(audio);/****************/音频[0].暂停();audio[0].load();//暂停和恢复所有音频元素/****************/}音频 = $("<audio>").attr("id", "player").attr("预加载", "自动");
解决方案
你的 change 函数应该是这样的:
函数更改(sourceUrl) {var audio = $("#player");$("#ogg_src").attr("src", sourceUrl);/****************/音频[0].暂停();audio[0].load();//暂停和恢复所有音频元素//音频[0].play();根据以下 Sprachprofi 的评论进行了更改音频[0].oncanplaythrough = 音频[0].play();/****************/}
问题是 audio.empty() 和音频变量.您试图附加一个清空的音频标签,但没有将音频标签写回浏览器.
I have only found one other solution but it was incomplete so I need help here.
i have the audio set up:
<audio id="player" controls="controls">
<source id="ogg_src" src="lib/audio/barger01.ogg" type="audio/ogg" />
<source id="mp3_src" src="lib/audio/barger01.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
I have a dynamically generated table of links to change the track:
<div id="audio_list">
<a href="#" class="track" data-location="http://www.newoggtrack.ogg">sample</a>
</div>
i have this jquery that i have no clue what to do with to change the track
$('.track').click(function(){
load_track = $(this).attr('data-location');//gets me the url of the new track
change_track(load_track);// function to change the track of the loaded audio player without page refresh preferred...
});
i found this function but i am not using it the right way
function change_track(sourceUrl) {
audio.empty();
$("#ogg_src").attr("src", sourceUrl).appendTo(audio);
/****************/
audio[0].pause();
audio[0].load();//suspends and restores all audio element
/****************/
}
audio = $("<audio>").attr("id", "player")
.attr("preload", "auto");
解决方案
Your change function should be like this:
function change(sourceUrl) {
var audio = $("#player");
$("#ogg_src").attr("src", sourceUrl);
/****************/
audio[0].pause();
audio[0].load();//suspends and restores all audio element
//audio[0].play(); changed based on Sprachprofi's comment below
audio[0].oncanplaythrough = audio[0].play();
/****************/
}
The problems were audio.empty() and the audio var. You were attempting to append an emptied audio tag, and didn't write out the audio tag back to the browser.
这篇关于使用 jquery 和 HTML5 音频标签切换音频源的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文