javascript - javascript 生成音频元素时,HTML5 audio.pause() 不起作用
问题描述
我在暂停或停止播放音乐时遇到问题。audio.pause() 很简单,不起作用。我尝试了一切,甚至更改源并再次加载它。非常感谢您的帮助。
无法在 Chrome、Opera、Firefox 中运行...
在我看来,我尝试了所有可能的方法,但无法弄清楚。
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<style>.ppbutton{font-size: 50px;cursor: pointer;}</style>
<a id="ppbutton1" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3"></a>
<a id="ppbutton2" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3"></a>
<script>
var clicked_id;
var audio_var;
$('.ppbutton').on("click",function(){
var datasrc = $(this).attr('data-src');
clicked_id= $(this).attr('id');
console.log(clicked_id);
audio_var = new Audio(datasrc);
if($(this).hasClass('fa-play')){
console.log('play_click');
$(this).removeClass('fa-play');
$(this).addClass('fa-pause');
console.log(audio_var);
audio_var.play();
} else {
console.log('pause_click');
$(this).removeClass('fa-pause');
$(this).addClass('fa-play');
audio_var.pause();
//audio_var.src='';
//audio_var.load();
console.log(audio_var);
}
});
</script>
https://codepen.io/gugi25/pen/ywrXxE
只需暂停或停止 javascript 生成的音频。
解决方案
一个非常小的变化应该会有所帮助。
在 If Hasclass 中移动新的 Audio 声明。您的问题是因为每次用户单击按钮时,都会创建一个新的音频元素。
https://codepen.io/mvinayakam/pen/KEYZdG
$('.ppbutton').on("click",function(){
var datasrc = $(this).attr('data-src');
clicked_id= $(this).attr('id');
console.log(clicked_id);
if($(this).hasClass('fa-play')){
console.log('play_click');
audio_var = new Audio(datasrc);
$(this).removeClass('fa-play');
$(this).addClass('fa-pause');
console.log(audio_var);
audio_var.play();
} else {
console.log('pause_click');
$(this).removeClass('fa-pause');
$(this).addClass('fa-play');
console.log(audio_var);
audio_var.pause();
//audio_var.src='';
//audio_var.load();
console.log(audio_var);
}
推荐阅读
- sql - 无法使用 SELECT 语句插入数据
- ios - 无法以美元为 InApp 购买添加价格,在瑞士获得选项,开发者帐户位于德国
- docker - 如何修复'每次打开计算机然后打开 docker 时,我都需要移除容器,重置 docker,然后再制作它们
- javascript - 如何在 react-native 中异步渲染大型组件
- javascript - AJAX JSON 响应不会刷新 Django 模板中的标记
- kubernetes - 为什么同一节点的pod可以互相ping通,但不同节点的pod不能ping通?
- java - 使用线性时间和恒定空间中交替位置的两个排序序列对数组进行排序
- firebase-test-lab - --num-flaky-test-attempts 是重新运行整个套件还是仅重新运行失败的测试?
- onedrive - 在 OneDrive for Business 中列出文件时出现 invalidAudienceUri 错误
- machine-learning - 贝叶斯优化,返回不同指标的组合作为评估