Nano Hash - криптовалюты, майнинг, программирование

Переместить изображение при воспроизведении аудио

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

Мой код: https://jsfiddle.net/Lc7ccjf6/

.hero {
	width: 600px;
	height: 600px;
}
.home.hero {
	background-image: url(http://i2.cdn.turner.com/cnnnext/dam/assets/111017060721-giant-panda-bamboo-story-top.jpg);
	background-size: cover;


}
	<a class="scroll" id="home"></a>
	<div class="home hero">
	<script>

  $(".home").animate({"top": "+=50px"}, 400);

     </script>
			<!--audio-->
			<!--set Volume -->
	<script type="text/javascript">
    function setVolume()
    {
        mySound=document.getElementById("sound");
        mySound.volume=0.5;
    }
    window.onload=setVolume;
    </script>
            <!--Volume end-->
		<div class="audio">
	    <audio id ="sound" controls>
        
        <source src="http://www.sousound.com/music/healing/healing_01.mp3" type="audio/mpeg" volume="0.5">
             Your browser does not support the audio element.
        </audio>
            
        <!--audio end-->
</div>

Я хочу, чтобы изображение перемещалось вниз на небольшое расстояние, а когда оно достигало дна, возвращалось наверх и продолжало делать это, пока воспроизводится звук. Любая идея, как это сделать?

javascript animation html audio
24.07.2015

  • Я пробовал варианты: ‹script type=text/javascript› move=document.getElementById(home); move.onplaying=function() { $(.home).animate({height:300px}, 400); } ‹/script› и ‹script› $(.home).animate({top: +=50px}, 400); ‹/скрипт› 24.07.2015
  • Вы включили библиотеку jQuery? Он не включен в jsfiddle или в код вашего сообщения. 24.07.2015
  • У меня есть ‹script type=text/javascript src=ajax.googleapis.com/ajax/libs/jquery/2.0.3/› ‹!-- Загрузить jCarousel js --› ‹script type=text/javascript src=js/jquery.jcarousel.js ›‹/script› ‹!-- Загрузить MixItUup js --› ‹script type=text/javascript src=js/jquery.mixitup.js›‹/script› ‹!-- Загрузить js --› ‹script type=text /javascript src=js/custom.js›‹/script› 24.07.2015
  • Вот подсказка. move = дом. home = тег привязки. Почему у вас есть move.onplaying ? Теги привязки не воспроизводят звук, поэтому попытка присоединить прослушиватель событий onplaying не сработает... Я полагаю, что событие, которое вы хотите прослушивать, это onplay=function(){//event code}; или addEventListener("play", function(){//event code});, но вам нужно будет прикрепить его к аудио тегу, не якорный тег. (В связи с комментарием, который я пробовал варианты :) 24.07.2015
  • Я изменил свой код, но все еще не могу заставить его работать, я хотел посмотреть, работает ли моя функция, поэтому вставил туда предупреждение, но оно никогда не вызывало оба предупреждения, не знаю, как это исправить: jsfiddle.net/Lc7ccjf6/3 26.07.2015

Ответы:


1

лично я предпочитаю событие "играть" вместо "игры" ( this SO ответ дает различия между ними), в вашей демонстрации скрипки я не нашел библиотеку JQuery, поэтому добавил ее и немного подчистил код, обновил код:

$(function(){

    var aud = $("#sound"),            
        move=$(".home");      

    move.animate({"top": "+=50px"}, 400);                        
    aud.on('play',function() { 
        move.animate({height:"300px"}, 400); 
    });
    aud.on('pause',function() { 
        if(aud[0].paused && (aud[0].currentTime === 0 || aud[0].currentTime === aud[0].duration) ) // checking if audio is finished, not just paused in between
            move.animate({height:"600px"}, 400);
    });
});

обновленная демонстрация скрипки

27.07.2015
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..