audio_examples/3.html at master · dipiash/audio_examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Player example</title>
	<link rel="stylesheet" href="./style.css">
</head>
<body>
<strong>
	Тесты:
</strong>
<ul>
	<li class="test_list-item"><a href="./index.html">1 тест</a></li>
	<li class="test_list-item"><a href="./2.html">2 тест</a></li>
	<li class="test_list-item"><a class="active" href="./3.html">3 тест</a></li>
	<li class="test_list-item"><a href="./4.html">4 тест</a></li>
	<li class="test_list-item"><a href="./5.html">5 тест</a></li>
	<li class="test_list-item"><a href="./6.html">6 тест</a></li>
	<li class="test_list-item"><a href="./worker/index.html">HTML5 audio + Dedicated Worker</a></li>
</ul>
<h1>
	Тест плеера для браузеров Safari и Chrome в macOS и iOS с использованием библиотеки Howler v2.0.9.
</h1>
<h3>Описание</h3>
<p>
	Для проекта используется библиотека Howler v2.0.9 (Feb 10, 2018).
</p>
<p>
	На основе примера - <a target="_blank" rel="nofollow noopener" href="https://github.com/goldfire/howler.js/tree/master/examples/player">из официального репозитория</a>.
</p>
<p>
	Данные о следующем треке получаются при обращении приложения к серверу при полном завершении проигрывания текущего трека.
</p>
<p>
	В некоторых случаях в браузере переключение на следующий трек может произойти только на активной вкладке или экране.
</p>
<h3>Условия</h3>
<ol>
	<li>Используется система macOS или iOS</li>
	<li>Используется браузер Safari (9 || 10 || 11 || 12) или Chrome</li>
</ol>
<h3>Шаги</h3>
<ol>
	<li>Нажать кнопку "Начать играть трек" 1 раз</li>
	<button id='play' style='font-size: 1em;'>Начать играть трек</button>
	<li>Убедиться что проигрывание началось и появился звук</li>
	<li>Нажать кнопку "Перемотать ближе к концу" 1 раз</li>
	<button id='seek' style='font-size: 1em;'>Перемотать ближе к концу</button>
	<li>Тестирование воспроизведения:</li>
	<li>Переключить вкладку с приложением на другую (или заблокировать экран для iOS)</li>
	<li>Дождаться окончания трека в течении 30 секунд</li>
	<li>(Для браузеров умеющих проигрывать только из активной вкладки) Переключить на вкладку плеера или разблокировать экран</li>
</ol>
<h3>Ожидаемый результат</h3>
<ol>
	<li>Началось проигрывание следующего трека</li>
</ol>
<h3>Лог воспроизведения</h3>

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.9/howler.min.js"></script>
<script>
	let trackId = 0;
	const tracks = [
		'https://srv1.mu.fm/music/9/67/muzika_v_mashinu_2018_-_arash_feat_helena_-_dooset_daram_filatov__karas_remix_(zf.fm).mp3',
		'https://srv1.mu.fm/music/4/ce/hiti_2018_-_willy_william_-_la_la_la.mp3'
	];

	const writeLog = text => {
		const newDiv = document.createElement("div");
		newDiv.style.color = 'red';
		newDiv.appendChild(document.createTextNode(text));
		document.body.appendChild(newDiv);
	};

	const createSound = trId => {
		writeLog('Аудио элемент создан');

		return new Howl({
			src: [tracks[trId || trackId]],
			html5: true,
			preload: true,
			onend: () => {
				trackId = +!trackId;

				writeLog('Трек закончился');

				fetch('https://cors-test.appspot.com/test', {credentials: 'include'})
						.then(() => {
							writeLog('Данные из сети получены');

							audio1 = createSound(trackId);
							audio1.play();
						});
			}
		});
	};

	let audio1 = createSound();

	const plB = document.getElementById('play');
	plB.addEventListener('click', () => {
		writeLog('Начато воспроизведение трека');

		audio1.play();
	});

	const seekB = document.getElementById('seek');
	seekB.addEventListener('click', () => {
		writeLog('Трек перемотан');

		audio1.seek(160);
	});
</script>
</body>
</html>