useAudio.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. /**
  2. * 利用
  3. */
  4. import store from '@/store';
  5. import { computed, onMounted, watch, ref, unref } from 'vue';
  6. import debounce from 'lodash-es/debounce'
  7. import mitt from 'mitt';
  8. let CLICKFIRST = false
  9. const currentPlayer = ref(null);
  10. const isInit = ref(false);
  11. const currentAudio = computed(() => store.getters['audio/currentAudio']);
  12. const isDoneforCover = computed(() => store.getters["scene/isDoneforCover"]);
  13. const currentScene = computed(() => store.getters["scene/currentScene"]);
  14. const isShowCover = computed(
  15. () => store.getters["scene/metadata"].coverInfo.isShowCover === 1 || false
  16. );
  17. async function initDefaultAudio() {
  18. watch([isShowCover, isDoneforCover, currentScene], ([val1, val2, val3]) => {
  19. //开场完成后才开始初始化audioplayer
  20. console.log('initDefaultAudio', unref(val1), unref(val2));
  21. if (!unref(val1)) {
  22. // 开场封面关闭时
  23. initAudioPlayer();
  24. } else {
  25. // 开场封面开启时并跳转完成时
  26. if (unref(val2)) {
  27. initAudioPlayer();
  28. }
  29. }
  30. watchUpdateCurrentScenEexplanation(unref(val3))
  31. watchResetV4BGM(unref(val3))
  32. }, {
  33. deep: true,
  34. immediate: true,
  35. })
  36. watch(currentAudio, (val, old) => {
  37. const isSame = unref(old) && unref(val).url === unref(old).url;
  38. console.log('isSame', isSame);
  39. if (unref(val) && unref(val).url.length > 0) {
  40. if (unref(currentPlayer)) {
  41. const url = unref(val).url
  42. const autoplay = unref(val).isAuto
  43. const loop = unref(val).repeat
  44. console.log('currentAudio', unref(val).url, autoplay, loop);
  45. if (!isSame) {
  46. unref(currentPlayer).switchUrl(url, autoplay, loop);
  47. } else {
  48. //相同URL的再次播放
  49. unref(currentPlayer).resume();
  50. }
  51. }
  52. }
  53. }, {
  54. deep: true,
  55. immediate: true,
  56. })
  57. }
  58. function initAudioPlayer() {
  59. if (!unref(isInit)) {
  60. isInit.value = true
  61. console.log('initAudioPlayer');
  62. const player = createAudioPlayer(unref(currentAudio).url, unref(currentAudio).isAuto, unref(currentAudio).repeat);
  63. currentPlayer.value = player
  64. player.on('play', () => {
  65. console.log('play--22', player.isPlaying);
  66. store.dispatch('audio/updatePlayerStatus', player.isPlaying);
  67. })
  68. player.on('pause', () => {
  69. console.log('pause--33', player.isPlaying);
  70. store.dispatch('audio/updatePlayerStatus', player.isPlaying);
  71. })
  72. player.on('end', () => {
  73. console.log('end--33', player.isPlaying);
  74. store.dispatch('audio/updatePlayerStatus', player.isPlaying);
  75. })
  76. window.store = store
  77. }
  78. }
  79. function watchUpdateCurrentScenEexplanation(data) {
  80. if ("explanation" in data) {
  81. store.dispatch("audio/initExplanationBGM", {
  82. url: data.explanation.audioUrl,
  83. repeat: data.explanation.repeat,
  84. isAuto: data.explanation.openByDefault,
  85. });
  86. } else {
  87. console.log('not initExplanationBGM');
  88. store.dispatch("audio/initExplanationBGM", {
  89. url: "",
  90. repeat: false,
  91. isAuto: false,
  92. });
  93. }
  94. }
  95. function watchResetV4BGM(data) {
  96. console.log('data.type', data.type)
  97. if (data.type !== '4dkk') {
  98. store.dispatch('audio/initV4BGM', '')
  99. }
  100. }
  101. function createAudioPlayer(url, autoplay, loop = true) {
  102. const player = new AudioPlayer({
  103. src: url,
  104. autoplay: autoplay,
  105. loop: loop
  106. });
  107. return player
  108. }
  109. class AudioPlayer {
  110. constructor(options) {
  111. this._src = options.src;
  112. this._loop = options.loop;
  113. this._autoplay = options.autoplay;
  114. this._isPlaying = false;
  115. this._lock = false;
  116. const emitter = mitt()
  117. Object.keys(emitter).forEach((method) => {
  118. this[method] = emitter[method]
  119. })
  120. this.audio = null
  121. this.switchUrl = debounce(this.switchUrlSource, 300).bind(this);
  122. this.play = debounce(this.toPlay, 300).bind(this);
  123. this.init();
  124. }
  125. get isPlaying() {
  126. return this._isPlaying;
  127. }
  128. switchUrlSource(url, autoplay, loop) {
  129. if ('unload' in this.audio) {
  130. console.log('switchUrlSource-1');
  131. this.audio.unload();
  132. } else {
  133. console.log('switchUrlSource-2');
  134. return
  135. }
  136. console.log('switchUrlSource', url);
  137. this._isPlaying = false;
  138. this._lock = false;
  139. this._autoplay = autoplay || false;
  140. this._loop = loop || false;
  141. this._src = url;
  142. this.audio = null;
  143. this.createAudio();
  144. this.play();
  145. this.emit('change', this.audio);
  146. }
  147. init() {
  148. this.createAudio();
  149. this.bindElement();
  150. this.play();
  151. this.emit('ready', this.audio);
  152. }
  153. createAudio() {
  154. this.audio = new Howl({
  155. preload: true,
  156. src: [this._src],
  157. loop: this._loop || false,
  158. html5: false,
  159. onplay: () => {
  160. this._isPlaying = true
  161. this.emit('play')
  162. },
  163. onpause: () => {
  164. this._isPlaying = false
  165. this.emit('pause')
  166. },
  167. onend: () => {
  168. this._isPlaying = false
  169. this.emit('end')
  170. },
  171. })
  172. }
  173. bindElement() {
  174. const $player = document.querySelector('.ui-view-layout')
  175. const onclick = () => {
  176. $player.removeEventListener('click', onclick)
  177. $player.removeEventListener('touchstart', onclick)
  178. //判断是否第一次进入或者是否已点击过
  179. if (CLICKFIRST) {
  180. return
  181. }
  182. CLICKFIRST = true
  183. this.play();
  184. }
  185. $player.addEventListener('click', onclick)
  186. $player.addEventListener('touchstart', onclick)
  187. }
  188. async toPlay() {
  189. try {
  190. if (!this._isPlaying && !this._lock) {
  191. console.log('play---1', this._autoplay)
  192. if (this._autoplay) {
  193. await this.audio.play();
  194. } else {
  195. //默认不自动播放重置状态
  196. this._isPlaying = false
  197. store.dispatch('audio/updatePlayerStatus', false);
  198. }
  199. }
  200. } catch (error) {
  201. console.warn('playError', error);
  202. }
  203. }
  204. pause() {
  205. return this.audio.pause();
  206. }
  207. resume() {
  208. return this.audio.play();
  209. }
  210. stop() {
  211. this.pause();
  212. store.dispatch('audio/updatePlayerStatus', false);
  213. }
  214. destroy() {
  215. console.warn('audio-destroy');
  216. if ('unload' in this.audio) {
  217. this.audio.unload();
  218. }
  219. this._isPlaying = false;
  220. this._autoplay = false;
  221. this._loop = false;
  222. this._src = '';
  223. this.audio = null;
  224. store.dispatch('audio/updatePlayerStatus', false);
  225. this.emit('destroy');
  226. }
  227. lock() {
  228. this._lock = true
  229. }
  230. unlock() {
  231. this._lock = false
  232. }
  233. mute() {
  234. return this.audio.mute(true);
  235. }
  236. unmute() {
  237. return this.audio.mute(false);
  238. }
  239. }
  240. export function useAudio() {
  241. return {
  242. initDefaultAudio,
  243. currentPlayer,
  244. };
  245. }