Javascript音频点击播放
Javascript Audio Play on click
我有一个JavaScript代码,可以在点击时播放声音。它可以在Chrome上运行,但在Firefox上它可以在加载时启动。
谁能帮忙?
<script>
var audio = new Audio("http://music.ogg");
audio.oncanplaythrough = function(){
audio.play();
}
audio.loop = true;
audio.onended = function(){
audio.play();
}
</script>
<input type="image" src="http://button.png" onclick="audio.play()">
尝试下面的代码片段
<!doctype html>
<html>
<head>
<title>Audio</title>
</head>
<body>
<script>
function play() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
<input type="button" value="PLAY" onclick="play()">
<audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
</body>
</html>
JavaScript
function playAudio(url) {
new Audio(url).play();
}
.HTML
<img src="image.png" onclick="playAudio('mysound.mp3')">
在大多数现代浏览器中受支持,并且易于嵌入到 HTML 元素中。
那行得通
<audio src="${ song.url }" id="audio"></audio>
<i class="glyphicon glyphicon-play-circle b-play" id="play" onclick="play()"></i>
<script>
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
$('#play').removeClass('glyphicon-play-circle')
$('#play').addClass('glyphicon-pause')
}else{
audio.pause();
audio.currentTime = 0
$('#play').addClass('glyphicon-play-circle')
$('#play').removeClass('glyphicon-pause')
}
}
</script>
你可以在两行中做到这一点
let playSound = () => new Audio("src").play()
<button onclick="playSound()">Play</button>
现在 Web 音频 API 已经存在并获得浏览器支持,这可能是一个更强大的选择。
Zounds 是围绕该 API 的原始包装器,用于在使用时以最少的样板播放简单的一次性声音。
虽然有几个答案是相似的,但我仍然有一个问题 - 用户会多次单击按钮,在自己身上播放音频(要么是意外点击的,要么他们只是在"播放"......
一个简单的解决方法:
var music = new Audio();
function playMusic(file) {
music.pause();
music = new Audio(file);
music.play();
}
在加载时设置音频允许每次调用函数时暂停"音乐" - 即使用户多次单击按钮,也可以有效地停止"噪音"(也无需关闭按钮,尽管为了用户体验,这可能是您想要做的事情)。
HTML:
<button onclick="play()">Play File</button>
<audio id="audio" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"></audio>
JavaScript:
let play = function(){document.getElementById("audio").play()}
相关文章:
- 使用HTMLMediaElement向后播放音频
- 播放音频时创建一个跳动的圆圈
- Javascript播放音频后其他没有音频崩溃
- 在播放完成之前再次单击播放音频文件
- 延迟后播放音频标签
- 如何使用Flash CC画布项目在iPad上播放音频
- 使用javascript播放音频(没有HTML5或可见播放器)
- 如何使用Bootstrap和Heroku为Rails应用程序添加隐藏的播放音频
- 检测iOS移动设备的JavaScript比自动播放音频
- 在手机和平板电脑浏览器上播放音频片段
- 需要帮助修复我的javascript"对于循环“;播放音频播放列表
- 自动播放音频播放列表SoundManager2 bar ui
- 单击链接时播放音频剪辑
- 使用 Redux 播放音频文件
- 在 iPad 上延迟后正在播放音频
- 关闭后,引导模式弹出窗口上的视频继续播放音频
- 无法更改用于播放音频的变量
- 我在 html5 音频标签中播放音频时收到 [对象媒体错误]
- 无法使用谷歌应用引擎播放音频.它在本地工作
- 在 javascript 数组中播放音频文件时遇到问题