想用怎么用js实现播放音频。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了想用怎么用js实现播放音频。相关的知识,希望对你有一定的参考价值。
现有一个页面,代码<bgsound src="采集指纹异常请重新采集.mp3" loop="-1" autostart="true" balance="0"> 我想制作几个按钮来控制音频的播放,即按一下按钮播放一段声音且声音只播放一遍,如何实现?好用追加分数
想让在IE8下也可以使用。怎么实现。
1、JS播放音乐需要区分浏览器,来使用不用的对象来播放音乐
2、在播放控制上要有【播放】和【停止】来控制音乐的播放
基于以上思路,代码如下:
<SCRIPT type="text/javascript">if(-1 != navigator.userAgent.indexOf("MSIE"))
//不是微软IE浏览器,则调用Flash来播放音乐
document.write(\' <OBJECT id="Player"\');
document.write(\' classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"\');
document.write(\' width=0 height=0 > <param name="URL" value="a.mp3" /> <param name="AutoStart" value="false" /> </OBJECT>\');
else
//是微软IE浏览器,则调用微软的Player对象来直接播放音乐
document.write(\' <OBJECT id="Player"\');
document.write(\' type="application/x-ms-wmp"\');
document.write(\' autostart="false" src= "a.mp3" width=0 height=0> </OBJECT>\');
</SCRIPT>
<input type=button value="播放" onclick="Player.controls.play();" />
<input type=button value="停止" onclick="Player.controls.stop();" /> 参考技术A 使用jpalyer
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/sound/jquery.jplayer.min.js" type="text/javascript"></script>
$(document).ready(
function()
$("#jquery_jplayer_1").jPlayer(
ready: function ()
$(this).jPlayer("setMedia", mp3: "/sound/rzcg.mp3"); ,
swfPath: "/js/sound",
supplied: "mp3",
volume:1.8,
preload: 'metadata',
solution: 'flash,html '
)
);本回答被提问者采纳
用 Js 播放完一个又一个的音频
【中文标题】用 Js 播放完一个又一个的音频【英文标题】:Playing audio after another has finished with Js 【发布时间】:2020-01-02 15:35:44 【问题描述】:我是初学者,对此问题有一些疑问:
我想播放音频文件的列表/数组。音频列表取决于用户的文本输入。仅当另一个音频结束时才应播放下一个音频。
我尝试使用 for 循环来做到这一点:
for (var i = 0; i< textinput.length; i++)
switch(textinput[i])
case 'a': playMusic('a');
break;
case 'b' : playMusic('b');
break;
case 'c' : playMusic('c');
break;
default: playMusic('d');
当然它会同时播放所有音频文件。
所以我尝试使用“onended”添加一个侦听器,但我总是以无限循环结束......有人可以帮助我吗?
【问题讨论】:
您使用的 HTML 是什么?你在使用audio
元素吗?
是的,我正在使用音频元素,例如:<audio id="a" preload="auto"> <source src="src/audio/a.mp3"/> </audio>
您可以简单地检查属性element.ended
,看看它是否已经完成。
我已经为你添加了一个我认为会满足你需求的答案。
【参考方案1】:
检查HTMLAudioElement
状态的简单示例如下:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio id='audio' autoplay controls src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3"></audio>
<select id='select'>
<option value="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" >Roar!</option>
<option value="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-15.mp3" >Sample song</option>
</select>
<script>
audio.onended = function ()
this.setAttribute('src', document.getElementById('select').value);
</script>
</body>
</html>
请记住,在没有用户交互的情况下,您无法通过脚本开始播放音频。您将始终需要使用事件来触发要播放的音频(这是出于安全原因)。
【讨论】:
非常感谢您的时间和帮助,我会努力的:-) @ingita 如果我的回答对您有帮助,请随时给它一个赞:D【参考方案2】:首先,您的逻辑有误。 为什么要让内存忙于“谁知道它什么时候结束”循环? 你的任务很明确,按顺序播放一组声音,就像播放列表一样。
为此,您有活动。音频标签为您提供certain events,例如“正在播放”、“正在寻找”或“结束”。您可以将这些事件用于链式触发器。
保留当前播放音频的索引,在每个“结束”事件上用下一个更新它,如果没有新的就什么都不做。
audioObject.addEventListener('ended',function(e)
current++; //Your current index
if(current < totalAudioCount) //Check if there is other audio.
playMusic(audioIndex[current])
);
我相信您可以找到大量有关此主题的教程。请在提问之前先做一些研究,如果您尝试过的方法不起作用,请在此处解释,然后提出您的问题。
附:永远不要相信用户的输入,你必须检查这些值是否符合预期的格式,它们是否有效?
【讨论】:
以上是关于想用怎么用js实现播放音频。的主要内容,如果未能解决你的问题,请参考以下文章