使用当前音频创建播放/暂停功能 [英] Creating play/pause functions with current audio javascript
问题描述
我有一个扩展程序用于我正在使用的chrome,我有一个HTML弹出窗口,其中包含播放音频的按钮。我不认为我的方法是最优雅的,我无法探索缩小这种方式的方法。我知道这是非常低效的。我希望能够分辨HTML页面上的哪个按钮被点击,然后使用该ID播放具有相同ID的音频文件。我现在的方式是使用JavaScript中的EventListener来使用多个函数来停止或播放。有没有办法把所有这一切通过JavaScript或jQuery的一个函数来解决这个混乱? 由于我在Chrome浏览器扩展中执行此操作,因此无法在HTML文档中使用Javascript。
目前,我拥有这样的HTML; p>
< script type =text / javascriptsrc =js / audio.js>< / script>
< a href =#class =myButtonid =stopbutton>停止音频< / a>
< a href =#class =myButtonid =aud1>音频1< / a>
< a href =#class =myButtonid =aud2> Audio 2< / a>
< a href =#class =myButtonid =aud3>音频3< / a>
我的JS文件像这样为我的音频文件创建变量。
var aud1 = new Audio();
var aud2 = new Audio();
var aud3 = new Audio();
与此功能一起使用相应名称选择按钮时开始播放。
函数aud1play(){
aud1.src =mp3 / aud1.mp3;
aud1.play();
}
document.getElementById('aud1')。addEventListener('click',aud1play);
//获得趋势
要停止我的音频,我有以下函数:
函数audstop(){
aud1.pause;
aud2.pause;
aud3.pause;
document.getElementById('stopbutton')。addEventListener('click',audstop);
var audios = Array.prototype.map.call(document.getElementsByClassName(myButton),function(el){
var audio = new Audio();
audio.preload =none; // = >未预加载
audio.src =mp3 /+ el.id +。mp3;
el.onclick = audio.play.bind(音频);
返回音频;
});
只需遍历按钮,使用正确的src为它创建一个音频元素,然后绑定onclick聆听其播放功能。然后映射音频元素。
document.getElementById('stopbutton')。addEventListener('click',function(){
audios.forEach(audio => audio.pause());
});
要停止,只需遍历音频元素并在每个元素上调用stop函数... p>
I have an extension for chrome I am working on, I have an HTML popup that has buttons that play audio. I don't think my approach is the most elegant and I am having trouble exploring ways to shrink this down. I know this is very inefficient. I want to be able to tell which button was clicked on the HTML page, then using that ID play the audio file with that same ID. The way I have it now is using the EventListener in javascript to use multiple functions to stop or play. Is there a way to put all of this in one function through javascript or jquery to fix this chaos? Since I am doing this on a chrome extension I cannot use Javascript in the HTML document.
Currently I have my HTML like this;
<script type="text/javascript" src="js/audio.js"></script>
<a href="#" class="myButton" id="stopbutton">Stop Audio</a>
<a href="#" class="myButton" id="aud1">Audio 1</a>
<a href="#" class="myButton" id="aud2">Audio 2</a>
<a href="#" class="myButton" id="aud3">Audio 3</a>
My JS file like this to create the variables for my audio files.
var aud1 = new Audio();
var aud2 = new Audio();
var aud3 = new Audio();
Along with this function to start playback when a button is selected with the coresponding name.
function aud1play() {
aud1.src = "mp3/aud1.mp3";
aud1.play();
}
document.getElementById('aud1').addEventListener('click', aud1play);
//you get the trend
To stop my audio I have the following function:
function audstop() {
aud1.pause;
aud2.pause;
aud3.pause;
document.getElementById('stopbutton').addEventListener('click', audstop);
var audios= Array.prototype.map.call(document.getElementsByClassName("myButton"),function(el){
var audio=new Audio();
audio.preload="none";//=> not preloaded
audio.src="mp3/"+el.id+".mp3";
el.onclick=audio.play.bind(audio);
return audio;
});
Simply iterate over your buttons, create an audio element with the right src for it, and bind the onclick listener to its play function. Then map the audio elements.
document.getElementById('stopbutton').addEventListener('click', function(){
audios.forEach(audio=>audio.pause());
});
To stop, simply iterate over the audio elements and call the stop function on each...
这篇关于使用当前音频创建播放/暂停功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!