单击 div 框时不播放音频

Posted

技术标签:

【中文标题】单击 div 框时不播放音频【英文标题】:Audio does not play when I click on the div box 【发布时间】:2019-05-15 07:41:02 【问题描述】:

我有带有 testpeech 类的 div,当我单击此框时,我上传文件夹中的音频开始播放。 如果再次单击同一个 div,如何暂停音频? 最终结果是像普通播放/暂停按钮一样播放和暂停音频。

var obj = document.createElement("audio");
var counts = 0;
console.log(counts);
document.body.appendChild(obj);
obj.src = ".../wp-content/uploads/audios/Kalimba.mp3";
obj.load();
obj.volume = 0.3;
obj.preLoad = true;
obj.controls = true;
//obj.autoplay = true;

$(".testspeech").click(function() 
    if(counts == 0)
        console.log(counts);
        obj.play();      
    
    else
        obj.pause();
        counts = 0;   
        console.log(counts);
    
);

我使用 css 从屏幕上隐藏按钮:

audio
    display: none;

当我点击它时,音频会播放,但它永远不会停止。

【问题讨论】:

你从未将counts 设置为真实值... 【参考方案1】:

检查音频“暂停”属性。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<button class="testspeech">
play/pause
</button><br/>
<script>
var obj = document.createElement("audio");
document.body.appendChild(obj);
obj.src = ".../wp-staging/07/wp-content/uploads/audios/Kalimba.mp3";
obj.load();
obj.volume = 0.3;
obj.preLoad = true;
obj.controls = true;

$(".testspeech").click(function() 
   obj.paused?obj.play():obj.pause()
);
</script>
</body>
</html>

【讨论】:

发布此问题后,网站被黑了。您介意更改 html 中的网址吗?

以上是关于单击 div 框时不播放音频的主要内容,如果未能解决你的问题,请参考以下文章

Javascript 播放 Div 中的所有音频元素

调用时不播放随机音频列表

点击播放音频时出现不必要的延迟

预加载音频并在播放期间应用 css

多个 HTML5 音频播放器。单击另一个音频实例时停止播放其他音频实例

我正在尝试显示文本,单击时播放音频,当声音结束时出现新文本,单击时播放新音频