极简主义播放()和贫困()音频解决方案
Minimalistic play() and pause() audio solution
我在另一个问题中发现了一个小代码片段,只使用jquery play()和pause()播放mp3:
<a href="#" rel="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3"
class="play">Play</a>
<div class="pause">Stop</div>
<script>
$(document).ready(function() {
var audioElement = document.createElement('audio');
var source = $('.play').attr('rel');
audioElement.setAttribute('src', source);
//audioElement.setAttribute('autoplay', 'autoplay');
audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('.play').click(function() {
audioElement.play();
});
$('.pause').click(function() {
audioElement.pause();
});
});
我从"播放"链接的rel属性中获得音频源。现在我想添加更多的音频链接,并使源相对于它们的rel属性。
我试过
var source = $(this).attr('rel');
还有.find()和.each(),但到目前为止都没有效果。我已经设置了一个带有两个音频链接的jsfiddle,其中只播放第一个音频文件。(fiddle链接到一个外部脚本,客户端在他的网站上使用该脚本,其中只加载了jquery 1.4.3,但我想这无论如何都是可能的。我只是不想使用音频播放器插件,我的目标是一个极简主义的解决方案。)
如有任何帮助,我们将不胜感激!
您可以更新脚本,为每个容器创建一个音频标签:
$(document).ready(function () {
// For each container div
$(".container").each(function() {
// Create the HTML5 <audio> tag
var audioElement = document.createElement('audio');
// Find the play/pause buttons
var $play = $(this).find(".play");
var $pause = $(this).find(".pause");
// Load the source from the play button
var source = $play.attr('rel');
audioElement.setAttribute('src', source);
$.get();
// Play the sound when loaded
audioElement.addEventListener("load", function () {
audioElement.play();
}, true);
// When the user clicks on the play button, play the audio
$play.click(function () {
audioElement.play();
});
// When the user clicks on the pause button, pause it
$pause.click(function () {
audioElement.pause();
});
});
});
并更新了Fiddle:http://jsfiddle.net/sY7UT/
相关文章:
- 可以转换显示属性吗?如果没有,什么'这是最好的解决方案
- iPad虚拟键盘-哪一个-javasctript解决方案
- AJAX HTTP基本身份验证解决方案
- 在chrome web商店中打开时,是否有允许执行内容/后台脚本的解决方案
- Chart.js-添加渐变而不是纯色-实现解决方案
- learnyounode杂耍异步解决方案不工作
- 了解因子分解解决方案
- 提交表单后的最佳解决方案
- 计时器在使用 jQuery 一分钟后没有触发,或者每 1 分钟后给出一些其他解决方案来触发功能
- chrome中的意外全局变量有解决方案吗
- 更好的解决方案HTML元素幻灯片从右侧CSS转换
- 使用SeleniumWebdriver将文本复制到文件时出现编译错误的解决方案
- 如何让我的网站上的WEBP图像加载在morzilla firefox中有一个可能的解决方案吗?如果是,那么如何
- JS驱动的常见问题页面的推荐DB解决方案
- 这里有一个更优雅的/DRY/可维护的JS解决方案
- 太多的音频标签使我的网站加载速度非常慢.有没有解决方案
- 什么'这是一个很好的webrtc音频解决方案
- 极简主义播放()和贫困()音频解决方案
- Cordova导出的Construct 2游戏音频问题的实现解决方案
- 在现场尝试了多种解决方案,但没有一种奏效:在Konami代码上播放<音频>