Здравствуйте!
Очень нужен совет, не понятно как работает метод click() в данном случае:
мне нужно сделать аудио плеер, я использую плагин jquery.simpleplayer().
Вот его код:
/*
* SimplePlayer - A jQuery Plugin
* @requires jQuery v1.4.2 or later
*
* SimplePlayer is a html5 audio player
*
* Licensed under the MIT:
* [url]http://www.opensource.org/licenses/mit-license.php[/url]
*
* Copyright (c) 2010-, Yuanhao Li (jay_21cn -[at]- hotmail [*dot*] com)
*/
(function($) {
$.fn.player = function(settings) {
var config = {
progressbarWidth: '200px',
progressbarHeight: '5px',
progressbarColor: '#22ccff',
progressbarBGColor: '#eeeeee',
defaultVolume: 0.8
};
if (settings) {
$.extend(config, settings);
}
var playControl = '<span class="simpleplayer-play-control"></span>';
var stopControl = '<span class="simpleplayer-stop-control"></span>';
this.each(function() {
$(this).wrap('<div class="simple-player-container" style="background-color: #ddd;' +
' padding: 0 10px 5px 5px;" />').parent().prepend(
'<div><ul>' +
'<li style="display: inline-block; padding: 0 5px; "><a style="text-decoration: none;"' +
' class="start-button" href="javascript:void(0)">' + playControl + '</a></li>' +
'<li class="progressbar-wrapper" style="display: inline-block; cursor: pointer; width:' + config.progressbarWidth + ';">' +
'<span style="display: block; background-color: ' + config.progressbarBGColor + '; width: 100%; ">' +
'<span class="progressbar" style="display: block; background-color: ' + config.progressbarColor +
'; height: ' + config.progressbarHeight + '; width: 0%; ">' +
'</span></span>' +
'</li>' +
'</ul></div>'
);
var simplePlayer = $(this).get(0);
var button = $(this).parent().find('.start-button');
var progressbarWrapper = $(this).parent().find('.progressbar-wrapper');
var progressbar = $(this).parent().find('.progressbar');
simplePlayer.volume = config.defaultVolume;
button.click(function() {
if (simplePlayer.paused) {
simplePlayer.play();
$(this).find('.simpleplayer-play-control').addClass('simpleplayer-stop-control').removeClass('simpleplayer-play-control');
} else {
simplePlayer.pause();
$(this).find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
}
});
progressbarWrapper.click(function(e) {
if (simplePlayer.duration != 0) {
left = $(this).offset().left;
offset = e.pageX - left;
percent = offset / progressbarWrapper.width();
duration_seek = percent * simplePlayer.duration;
simplePlayer.currentTime = duration_seek;
}
});
$(simplePlayer).bind('ended', function(evt) {
simplePlayer.pause();
button.find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
progressbar.css('width', '0%');
});
$(simplePlayer).bind('timeupdate', function(e) {
duration = this.duration;
time = this.currentTime;
fraction = time / duration;
percent = fraction * 100;
if (percent) progressbar.css('width', percent + '%');
});
if (simplePlayer.duration > 0) {
$(this).parent().css('display', 'inline-block');
}
});
return this;
};
})(jQuery);
Далее у меня есть страница в которой у меня выводится этот плеер при нажатии на ссылки 1 и 2.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>player</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="js/simpleplayer.css" type="text/css">
<script type="text/javascript" src="js/jquery.simpleplayer.js"></script>
<script type="text/javascript">
function getaudiolink(audio_id){
var settings = {
progressbarWidth: '200px',
progressbarHeight: '5px',
progressbarColor: '#22ccff',
progressbarBGColor: '#eeeeee',
defaultVolume: 0.8
};
$.ajax({
type: "POST",
url: "audio.php",
data: "id=" + audio_id,
success: function(msg){
$(".player").attr("src", msg);
}
});
$("#audioplayer").html("");
$("#audioplayer").html('<audio class="player" src=""></audio>');
$(".player").player(settings);
$('.start-button').click();
}
</script>
</head>
<body>
<div id="audioplayer">
<audio class="player" src="">
Your browser does not support the <code>audio</code> element.
</audio>
</div>
<a href="#" onClick = "getaudiolink(1)">1</a><BR>
<a href="#" onClick = "getaudiolink(2)">2</a><BR>
</body>
</html>
Сами ссылки на аудио файлы получаются из файла audio.php:
<?php
if($_POST['id'] == "1"){
echo "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3";
}
if($_POST['id'] == "2"){
echo "http://upload.wikimedia.org/wikipedia/commons/8/82/Riddle_song.ogg";
}
?>
Проблема в том, что используя метод клик, который задействует кнопку play сама кнопка меняется на кнопку паузы, но музыка не начинает воспроизводиться. Подскажите пожалуйста в чем проблема, как можно это исправить?
trigger("click") и triggerHandler('click') не помогают =(