Показать сообщение отдельно
  #1 (permalink)  
Старый 28.07.2012, 20:46
Новичок на форуме
Отправить личное сообщение для evgenyan Посмотреть профиль Найти все сообщения от evgenyan
 
Регистрация: 05.10.2010
Сообщений: 9

Вопрос насчет метода click()
Здравствуйте!
Очень нужен совет, не понятно как работает метод 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') не помогают =(
Ответить с цитированием