点击时切换音频?
Posted
技术标签:
【中文标题】点击时切换音频?【英文标题】:Toggling audio on click? 【发布时间】:2013-11-08 09:18:56 【问题描述】:请看这个小提琴http://jsfiddle.net/rabelais/yLdkj/1/
上面的小提琴显示了三个悬停播放音频的小节。如何更改此设置,以便音乐播放并在点击时暂停。此外,如果一个音频正在播放而另一个被点击,那么已经播放的歌曲如何暂停?
$("#one").mouseenter(function ()
$('#sound-1').get(0).play();
);
$("#one").mouseleave(function ()
$('#sound-1').get(0).pause();
);
$("#two").mouseenter(function ()
$('#sound-2').get(0).play();
);
$("#two").mouseleave(function ()
$('#sound-2').get(0).pause();
);
$("#three").mouseenter(function ()
$('#sound-3').get(0).play();
);
$("#three").mouseleave(function ()
$('#sound-3').get(0).pause();
);
【问题讨论】:
【参考方案1】:试试
<div id="sound-bars">
<div id="one" class="bars" data-target="#sound-1"></div>
<div id="two" class="bars" data-target="#sound-2"></div>
<div id="three" class="bars" data-target="#sound-3"></div>
</div>
<audio id="sound-1" class="sound">
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
<audio id="sound-2" class="sound">
<source src="http://angelaandtom.co.uk/lib/audio/you did not listen .mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/you did not listen .oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
<audio id="sound-3" class="sound">
<source src="http://angelaandtom.co.uk/lib/audio/can you hear me .mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/can you hear me .oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
然后
var $sounds = $('.sound'),
$bars = $('#sound-bars .bars');
$bars.click(function ()
var $this = $(this),
$target = $($this.data('target')),
target = $target[0];
$bars.not(this).removeClass('playing');
$sounds.not($target).each(function ()
this.pause();
);
$this.toggleClass('playing');
if ($this.hasClass('playing'))
target.play();
else
target.pause();
)
演示:Fiddle
【讨论】:
【参考方案2】:您可以在单击 div 时选中暂停所有音频,然后播放相关音频。你也可以稍微整理一下代码:
jQuery:
$(".playbtn").click(function()
// Pause all audio
$("audio").each(function(index, elem)
elem.pause();
);
// Grab the associated sound ID
var soundId = $(this).data("soundid");
// Play the audio
$("#sound-"+soundId)[0].play();
);
HTML:
<div class="playbtn" data-soundid="1">Play #1</div>
<div class="playbtn" data-soundid="2">Play #2</div>
<div class="playbtn" data-soundid="3">Play #3</div>
<div class="playbtn" data-soundid="4">Play #4</div>
<audio id="sound-1">
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
<audio id="sound-2">
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
<audio id="sound-3">
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
<audio id="sound-4">
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
<source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
Your browser isn't compatible.
</audio>
【讨论】:
【参考方案3】:$("#one").click(function ()
pauseAll();
$('#sound-1').get(0).play();
);
$("#two").click(function ()
pauseAll();
$('#sound-2').get(0).play();
);
$("#three").click(function ()
pauseAll();
$('#sound-3').get(0).play();
);
function pauseAll()
$("audio").each(function ()
this.pause();
);
这很好用here。
【讨论】:
你的链接似乎回到了我原来的小提琴? 谢谢,但是在同一个栏中单击时也可以暂停吗?例如点击第一个小节,播放音乐,点击它暂停的同一个小节? 没有。它将首先暂停所有,然后播放当前。但是你不会感觉到它是否真的被暂停了。您可以自己查看jsfiddle.net/YR2Yd也更新了答案中的链接。以上是关于点击时切换音频?的主要内容,如果未能解决你的问题,请参考以下文章
当airpods连接时,routeChangeNotification在音频切换到扬声器后检测newDeviceAvailable