Javascript Sound Start / Stop и изменение изображения - PullRequest
Новая
       2

Javascript Sound Start / Stop и изменение изображения

0 голосов
/ 01 декабря 2011

Я новичок в JS, и у меня довольно простая кажущаяся проблема.

Я хочу иметь маленькое изображение, которое при нажатии переключается на другое изображение и одновременно начинает воспроизводить зацикленный звуковой файл.При повторном нажатии на изображение оно возвращается к исходному изображению, а также останавливает звуковой файл.

Вы можете думать об этом как о кнопке с надписью «старт».при нажатии на кнопку «пуск» он зацикливает звук и меняется на «стоп», а при нажатии на кнопку «стоп» он возвращается к началу и звук прекращается.

Я дошел до создания не отображаемого флажка внутри метки, представляющего собой квадрат, который при включении воспроизводит звук, а при отключении останавливает звук.Проблема в том, что я не могу изменить флажок на разные изображения с помощью «check», «uncheck».

У меня также есть некоторый код с изображениями для изменения ссылок, но я не могу понять, как заставить его воспроизводить звук.

ТАК, в принципе, мне нужно объединить эти две вещи.Но я не могу понять, как.И я последние два дня безостановочно гуглю, но не могу найти четкого и простого ответа.

Может быть полезно знать, что я планирую разместить на этих страницах много маленьких кликабельных изображений, поэтому Javascript должен быть легким, но влиять на все ссылки или элементы div или на что бы они ни находилиськонец.

Извините за такой длинный вопрос.Кто-нибудь?

Заранее спасибо!

1 Ответ

1 голос
/ 01 декабря 2011 
<html>
    <head>
        <script type="text/javascript">
            var pos = 0
            var sId = 'sound';

            function change() {
                if(pos == 0) {
                    pos = 1;
                    document.getElementById('btn').src="http://www.buzzingup.com/wp-content/uploads/2011/07/stop.png";

                    var e = document.createElement('embed');
                    e.setAttribute('src','beep.mp3');
                    e.setAttribute('id',sId);
                    e.setAttribute('hidden','true');
                    e.setAttribute('autostart','true');
                    e.setAttribute('loop','true');

                    document.body.appendChild(e);
                } else {
                    pos = 0;
                    document.getElementById('btn').src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png";
                    document.body.removeChild(document.getElementById(sId));
                }
            }
        </script>
    </head>
    <body>
        <img src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png" onClick="change()" id="btn" />
    </body>
</html>

Как насчет этого, я думаю, это должно сработать.

Edit: Вот версия OO, которая должна делать то, что вам нужно: 

<html>
    <head>
        <script type="text/javascript">
            function imageSwitch(_imgID,_imgStart,_imgStop,_soundFile) {
                this.imgID = _imgID;
                this.imgStart = _imgStart;
                this.imgStop = _imgStop;
                this.soundFile = _soundFile;

                this.pos = 0;
                this.e;

                this.change = function() {
                    if(this.pos == 0) {
                        this.pos = 1;
                        document.getElementById(this.imgID).src = this.imgStop;

                        this.e = document.createElement('embed');
                        this.e.setAttribute('src',this.soundFile);
                        this.e.setAttribute('id','sound'+this.imgID);
                        this.e.setAttribute('hidden','true');
                        this.e.setAttribute('autostart','true');
                        this.e.setAttribute('loop','true');

                        document.body.appendChild(this.e);
                    } else {
                        this.pos = 0;
                        document.getElementById(this.imgID).src = this.imgStart;
                        this.e.parentNode.removeChild(this.e);
                    }
                }
            }
        </script>
        <script type="text/javascript">
            var abc = new imageSwitch('btn1','http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png','http://www.buzzingup.com/wp-content/uploads/2011/07/stop.png','beep.mp3');
            var def = new imageSwitch('btn2','http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png','http://www.buzzingup.com/wp-content/uploads/2011/07/stop.png','beep.mp3');
        </script>
    </head>
    <body>
        <img src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png" onClick="abc.change()" id="btn1" />
        <img src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png" onClick="def.change()" id="btn2" />
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...