上代码
( function($){
$.fn.audio = function(musicURI){
$(this).append(" <i class='fa fa-play'></i>");
$(this).click(function(){
if( element(musicURI)) {
$(this).children('.fa').removeClass("fa-play");
$(this).children('.fa').addClass("fa-pause");
} else {
$(this).children('.fa').removeClass("fa-pause");
$(this).children('.fa').addClass("fa-play");
}
});
debug('Audio');
};
function debug(obj) {
if(window.console && window.console.log) {
window.console.log("%c jQuery Plugin " + obj, 'background-image:url(http://cc-cdn.b0.upaiyun.com/static/console.jpg); line-height: 10px; background-repeat: no-repeat; padding-left: 40px; background-position: left center; color: #F217B9; ');
}
};
function element(uri) {
if(! $("audio").length > 0)
{
var element = document.createElement("audio");
element.setAttribute('src', uri);
element.setAttribute('preload',true);
element.setAttribute('loop',true);
element.setAttribute('volume', 0.1);
}
//element.play();
if(element.paused)
{
element.play();
return true;
}
else
{
element.pause();
return false;
}
};
})(jQuery);
$("#audio").audio("http://m1.music.126.net/_-Or3YYe0bjwEXkiz-pWHw==/7733964790811266.mp3");多次点击会有多个声音出来， 怎么避免
audio重复创建？ 谢谢
比如判断audio的个数,你可以自己限定范围
对象的重复创建，可以自行优化
命名可以自行修改
(function($) {
$.fn.audio = function(musicURI) {
var $container = $(this);
var $ctrl = $('<i class="fa fa-play"></i>');
$container.append($ctrl);
$ctrl.click(function() {
if (element($container, musicURI)) {
$container.children('.fa').removeClass("fa-play").addClass("fa-pause");
} else {
$container.children('.fa').removeClass("fa-pause").addClass("fa-play");
}
});
};
function element(container, uri) {
var element;
if ($("audio").length == 0) {
element = document.createElement("audio");
element.setAttribute('src', uri);
element.setAttribute('preload', true);
element.setAttribute('loop', true);
element.setAttribute('volume', 0.1);
container.append(element);
} else {
element = $("audio").get(0);
}
if (element.paused) {
element.play();
return true;
} else {
element.pause();
return false;
}
};
})(jQuery);首先的问题是并没有添加audio元素，你只是创建了audio而没有添加到页面中，你只要审查一下元素就能发现这个问题，你需要这样：
`var button = document.getElementById("audio");
button.appendChild(element);`其二：.length返回的是匹配元素的个数，因此没有元素时为0，那么 ! $("audio").length是true, true > 0 为 true，于是就一直创建元素了。
就这些，不过运行的话还有error。