floydback

Создание контекста и декодирование нужно делать один раз. Аудио буфер сохранить в переменную buffer. А вот при каждом запуске play делать только необходимое

play () {
  source = context.createBufferSource()
  source.buffer = buffer
  source.connect(destination)
  source.start()
}

Первый вариант, использовать callback timeupdate, отслеживать приближение к концу, чтобы перематывать на начало. Минус этого метода состоит в том, что этот колбэк срабатывает редко и, каждое повторение будет неравной длины. Это может быть слышно. К тому же можно пропустить конец, потому что колбэк никогда на конечной точке не сработает.

Второй вариант, делать тоже самое с помощью reqest animation frame. Он срабатывать чаще, но тоже есть свои минусы. Если владыка закрыта на слабых устройствах Теоретически может вызываться реже. Но из практики могу сказать, что он работает лучше и услышать неровность по длительности почти невозможно.

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

Третий вариант. Если вы делаете что-то, где важен реально ровный ритм (например, метроном), единственный выход читать audioBuffer, копировать его много раз, склеивать в один длинный массив и проигрывать этот длинный файл. Работает это быстро и очень точно.

В data нужно добавить переменную для слайдера

data () {
    return {
      percent: 0
    }
}

В шаблоне подключаете vue-slider

<vue-slider v-bind="sliderStyleObject" v-model.number="percent" />

где sliderStyleObject - это описание стилей, т.е. то, что у вас сейчас в options

И создайте вычисляемое свойство для цены

computed: {
  price () {
    return myCalc(this.percent)
  }
}

Для этого создан yarn

Была подобная задача, только на других языках. Решение было такое:
1. по IP узнаем долготу и ширину
2. Через сервисы google/yandex и т.п. По гео-данным ищем название местности на выбранных языках.

Только это было серверное решение.

Кстати, не очень понятно зачем вы узнаете инфу об IP через Ajax. Если надо определить город текущего пользователя, можно использовать geolocation api - координаты он отдаёт. Если надо определить положение именно IP адреса, то проще это делать там, где этот IP определяется, т.е. на стороне сервера. Даже у nginx есть расширение из ip в geo автоматом. Подумаете об архитектуре, может удобнее сделать по-другому.

Отличный вопрос! Сам долго задавался этой проблемой. Как бекендщик, понимал необходимость но не знал как реализовать структуру, чтобы не было каши.

Решение, которое помогло: нужно добиться того, чтобы в PlayerApp вообще не было обращений в DOM. Кстати, тогда и jQuery не нужен будет внутри PlayerApp. Там должно быть только контекст аудио, ноды, аналайзер и проч. Вот только это сделает код намного проще, чище и понятнее.

Например, PlayerApp.js может выглядеть так

(function() {
	var PlayerApp, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments) } }

	PlayerApp = (function() {
		function PlayerApp(url) {
			this.play = __bind(this.play, this)
			// другие __bind здесь, stop, resume, etc...

			this.audio = new Audio()
			this.audio.volume = 1
			this.audio.src = url

			this.audio.addEventListener("canplaythrough", this.canplay,  false)
			// другие addEventListener здесь: loadedmetadata, timeupdate, etc...
		}
		Track.prototype.play = function() {
			this.audio.play()
			if (typeof this.onplay_callback == "function") { this.onplay_callback() }
		}
		// другие функции здесь .... 
		return PlayerApp
	})()
	window.PlayerApp = PlayerApp
}).call(this)

А где-то в app.js будет графическая часть :

player = new PlayerApp()
player.onplay_callback = function() {
    $("#main-play-btn").toggleClass('play')
    $(".playlist-play-btn").toggleClass('play')
}

Таким образом, где бы ни запустили плей (кнопка в плеере, по центру экрана или пробелом на клавиатуре) отрисовка идет через одно место - колбэк onplay_callback. Через одно место ;) Смешно, но это очень упростило код мне.

Еще отлично организовано в Яндексе, посмотрите пример. Очень рекомендую.