musicBytedance.vue 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888
  1. <style scoped>
  2. /* * {
  3. margin: 0;
  4. padding: 0;
  5. list-style-type: none;
  6. }
  7. body {
  8. background: #dfe7ef;
  9. font-family: 'Bitter', serif;
  10. }
  11. * {
  12. box-sizing: border-box;
  13. } */
  14. .icon {
  15. display: inline-block;
  16. width: 1em;
  17. height: 1em;
  18. stroke-width: 0;
  19. stroke: currentColor;
  20. fill: currentColor;
  21. }
  22. .wrapper {
  23. width: 100%;
  24. display: flex;
  25. align-items: center;
  26. justify-content: center;
  27. background-size: cover;
  28. /* display: none; */
  29. }
  30. @media screen and (max-width: 700px), (max-height: 500px) {
  31. .wrapper {
  32. flex-wrap: wrap;
  33. flex-direction: column;
  34. }
  35. }
  36. .player {
  37. background: #eef3f7;
  38. width: 410px;
  39. min-height: 480px;
  40. box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32);
  41. border-radius: 15px;
  42. padding: 30px;
  43. }
  44. @media screen and (max-width: 576px), (max-height: 500px) {
  45. .player {
  46. width: 95%;
  47. padding: 20px;
  48. margin-top: 75px;
  49. min-height: initial;
  50. padding-bottom: 30px;
  51. max-width: 400px;
  52. }
  53. }
  54. .player__top {
  55. display: flex;
  56. align-items: flex-start;
  57. position: relative;
  58. z-index: 4;
  59. }
  60. @media screen and (max-width: 576px), (max-height: 500px) {
  61. .player__top {
  62. flex-wrap: wrap;
  63. }
  64. }
  65. .player-cover {
  66. width: 300px;
  67. height: 300px;
  68. margin-left: -70px;
  69. flex-shrink: 0;
  70. position: relative;
  71. z-index: 2;
  72. border-radius: 15px;
  73. z-index: 1;
  74. }
  75. @media screen and (max-width: 576px), (max-height: 500px) {
  76. .player-cover {
  77. margin-top: -70px;
  78. margin-bottom: 25px;
  79. width: 290px;
  80. height: 230px;
  81. margin-left: auto;
  82. margin-right: auto;
  83. }
  84. }
  85. .player-cover__item {
  86. background-repeat: no-repeat;
  87. background-position: center;
  88. background-size: cover;
  89. width: 100%;
  90. height: 100%;
  91. border-radius: 15px;
  92. position: absolute;
  93. left: 0;
  94. top: 0;
  95. }
  96. .player-cover__item:before {
  97. content: '';
  98. background: inherit;
  99. width: 100%;
  100. height: 100%;
  101. box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
  102. display: block;
  103. z-index: 1;
  104. position: absolute;
  105. top: 30px;
  106. transform: scale(0.9);
  107. filter: blur(10px);
  108. opacity: 0.9;
  109. border-radius: 15px;
  110. }
  111. .player-cover__item:after {
  112. content: '';
  113. background: inherit;
  114. width: 100%;
  115. height: 100%;
  116. box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
  117. display: block;
  118. z-index: 2;
  119. position: absolute;
  120. border-radius: 15px;
  121. }
  122. .player-cover__img {
  123. width: 100%;
  124. height: 100%;
  125. object-fit: cover;
  126. border-radius: 15px;
  127. box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
  128. user-select: none;
  129. pointer-events: none;
  130. }
  131. .player-controls {
  132. flex: 1;
  133. padding-left: 20px;
  134. display: flex;
  135. flex-direction: column;
  136. align-items: center;
  137. }
  138. @media screen and (max-width: 576px), (max-height: 500px) {
  139. .player-controls {
  140. flex-direction: row;
  141. padding-left: 0;
  142. width: 100%;
  143. flex: unset;
  144. }
  145. }
  146. .player-controls__item {
  147. display: inline-flex;
  148. font-size: 30px;
  149. padding: 5px;
  150. margin-bottom: 10px;
  151. color: #acb8cc;
  152. cursor: pointer;
  153. width: 50px;
  154. height: 50px;
  155. align-items: center;
  156. justify-content: center;
  157. position: relative;
  158. transition: all 0.3s ease-in-out;
  159. }
  160. @media screen and (max-width: 576px), (max-height: 500px) {
  161. .player-controls__item {
  162. font-size: 26px;
  163. padding: 5px;
  164. margin-right: 10px;
  165. color: #acb8cc;
  166. cursor: pointer;
  167. width: 40px;
  168. height: 40px;
  169. margin-bottom: 0;
  170. }
  171. }
  172. .player-controls__item::before {
  173. content: '';
  174. position: absolute;
  175. width: 100%;
  176. height: 100%;
  177. border-radius: 50%;
  178. background: #fff;
  179. transform: scale(0.5);
  180. opacity: 0;
  181. box-shadow: 0px 5px 10px 0px rgba(76, 70, 124, 0.2);
  182. transition: all 0.3s ease-in-out;
  183. transition: all 0.4s cubic-bezier(0.35, 0.57, 0.13, 0.88);
  184. }
  185. @media screen and (min-width: 500px) {
  186. .player-controls__item:hover {
  187. color: #532ab9;
  188. }
  189. .player-controls__item:hover::before {
  190. opacity: 1;
  191. transform: scale(1.3);
  192. }
  193. }
  194. @media screen and (max-width: 576px), (max-height: 500px) {
  195. .player-controls__item:active {
  196. color: #532ab9;
  197. }
  198. .player-controls__item:active::before {
  199. opacity: 1;
  200. transform: scale(1.3);
  201. }
  202. }
  203. .player-controls__item .icon {
  204. position: relative;
  205. z-index: 2;
  206. }
  207. .player-controls__item.-xl {
  208. margin-bottom: 0;
  209. font-size: 95px;
  210. filter: drop-shadow(0 11px 6px rgba(172, 184, 204, 0.45));
  211. color: #fff;
  212. width: auto;
  213. height: auto;
  214. display: inline-flex;
  215. }
  216. @media screen and (max-width: 576px), (max-height: 500px) {
  217. .player-controls__item.-xl {
  218. margin-left: auto;
  219. font-size: 75px;
  220. margin-right: 0;
  221. }
  222. }
  223. .player-controls__item.-xl:before {
  224. display: none;
  225. }
  226. .player-controls__item.-favorite.active {
  227. color: red;
  228. }
  229. [v-cloak] {
  230. display: none;
  231. }
  232. [v-cloak] > * {
  233. display: none;
  234. }
  235. .progress {
  236. width: 100%;
  237. margin-top: -15px;
  238. user-select: none;
  239. }
  240. .progress__top {
  241. display: flex;
  242. align-items: flex-end;
  243. justify-content: space-between;
  244. }
  245. .progress__duration {
  246. color: #71829e;
  247. font-weight: 700;
  248. font-size: 20px;
  249. opacity: 0.5;
  250. }
  251. .progress__time {
  252. margin-top: 2px;
  253. color: #71829e;
  254. font-weight: 700;
  255. font-size: 16px;
  256. opacity: 0.7;
  257. }
  258. .progress__bar {
  259. height: 6px;
  260. width: 100%;
  261. cursor: pointer;
  262. background-color: #d0d8e6;
  263. display: inline-block;
  264. border-radius: 10px;
  265. }
  266. .progress__current {
  267. height: inherit;
  268. width: 0%;
  269. background-color: #a3b3ce;
  270. border-radius: 10px;
  271. }
  272. .album-info {
  273. color: #71829e;
  274. flex: 1;
  275. padding-right: 60px;
  276. user-select: none;
  277. }
  278. @media screen and (max-width: 576px), (max-height: 500px) {
  279. .album-info {
  280. padding-right: 30px;
  281. }
  282. }
  283. .album-info__name {
  284. font-size: 20px;
  285. font-weight: bold;
  286. margin-bottom: 12px;
  287. line-height: 1.3em;
  288. }
  289. @media screen and (max-width: 576px), (max-height: 500px) {
  290. .album-info__name {
  291. font-size: 18px;
  292. margin-bottom: 9px;
  293. }
  294. }
  295. .album-info__track {
  296. font-weight: 400;
  297. font-size: 20px;
  298. opacity: 0.7;
  299. line-height: 1.3em;
  300. min-height: 52px;
  301. }
  302. @media screen and (max-width: 576px), (max-height: 500px) {
  303. .album-info__track {
  304. font-size: 18px;
  305. min-height: 50px;
  306. }
  307. }
  308. .scale-out-enter-active {
  309. transition: all 0.35s ease-in-out;
  310. }
  311. .scale-out-leave-active {
  312. transition: all 0.35s ease-in-out;
  313. }
  314. .scale-out-enter {
  315. transform: scale(0.55);
  316. pointer-events: none;
  317. opacity: 0;
  318. }
  319. .scale-out-leave-to {
  320. transform: scale(1.2);
  321. pointer-events: none;
  322. opacity: 0;
  323. }
  324. .scale-in-enter-active {
  325. transition: all 0.35s ease-in-out;
  326. }
  327. .scale-in-leave-active {
  328. transition: all 0.35s ease-in-out;
  329. }
  330. .scale-in-enter {
  331. transform: scale(1.2);
  332. pointer-events: none;
  333. opacity: 0;
  334. }
  335. .scale-in-leave-to {
  336. transform: scale(0.55);
  337. pointer-events: none;
  338. opacity: 0;
  339. }
  340. </style>
  341. <template>
  342. <div class="music-dy">
  343. <a-row>
  344. <a-col :span="24">
  345. <a-card>
  346. <div style="width: 100%; margin-bottom: 15px">
  347. <a-row>
  348. <a-col :span="6">
  349. 类型选择:<a-cascader :options="options" placeholder="请选择类型" @change="onChangeType" />
  350. </a-col>
  351. <a-col :span="6">
  352. 歌曲名称:<a-input placeholder="请输入歌曲名称" v-model="music" style="width: 187px"> </a-input>
  353. </a-col>
  354. <a-col :span="6">
  355. 作者:<a-input placeholder="请输入作者" v-model="author" style="width: 187px"></a-input>
  356. </a-col>
  357. <a-col :span="6">
  358. <a-button type="primary" @click="searchQuery" icon="search">搜索</a-button>
  359. </a-col>
  360. </a-row>
  361. </div>
  362. <!-- {{dataList}} -->
  363. <a-list
  364. item-layout="horizontal"
  365. :data-source="dataList"
  366. :pagination="pagination"
  367. :loading="loading"
  368. style="min-height: 400px"
  369. >
  370. <a-list-item slot="renderItem" slot-scope="item, index" v-if="dataList.length > 0">
  371. <a slot="actions" @click="playMusic(index)">播放</a>
  372. <a slot="actions" @click="downLoad(item)">下载</a>
  373. <a-list-item-meta>
  374. <!-- <a slot="title"
  375. >{{ item.musicInfo.name }}
  376. <span style="margin-left: 30px"> 作者:{{ item.musicInfo.author }}</span></a
  377. > -->
  378. <a slot="description">
  379. {{ item.musicInfo.name }}
  380. </a>
  381. </a-list-item-meta>
  382. <div style="width: 50%">作者:{{ item.musicInfo.author }}</div>
  383. </a-list-item>
  384. <a-list-item slot="renderItem" slot-scope="item, index" v-else>
  385. <a-list-item-meta>
  386. <a-empty />
  387. </a-list-item-meta>
  388. </a-list-item>
  389. </a-list>
  390. </a-card>
  391. </a-col>
  392. </a-row>
  393. <!-- :style="{ backgroundImage: picUrl }" -->
  394. <!-- <div class="mmPlayer-bg" style="background: #0b2040"></div> -->
  395. <!-- <a-modal title="音乐播放" v-model="showMusic" :footer="null"> -->
  396. <div
  397. class="wrapper"
  398. v-if="showMusic && tracks.length > 0"
  399. style="
  400. position: fixed;
  401. top: 0;
  402. right: 0;
  403. bottom: 0;
  404. left: 0;
  405. z-index: 1000;
  406. overflow: auto;
  407. outline: 0;
  408. background: rgba(0, 0, 0, 0.5);
  409. "
  410. @click="showMusic = false"
  411. >
  412. <div class="player" @click.stop style="position: relative">
  413. <a-icon
  414. type="close"
  415. @click="showMusic = false"
  416. style="font-size: 20px; position: absolute; top: 15px; right: 15px"
  417. />
  418. <div class="player__top">
  419. <div class="player-cover">
  420. <transition-group :name="transitionName">
  421. <div
  422. class="player-cover__item"
  423. v-if="$index === currentTrackIndex"
  424. :style="{ backgroundImage: `url(${track.cover})` }"
  425. v-for="(track, $index) in tracks"
  426. :key="$index"
  427. ></div>
  428. </transition-group>
  429. </div>
  430. <div class="player-controls">
  431. <div class="player-controls__item -favorite" :class="{ active: currentTrack.favorited }" @click="favorite">
  432. <svg class="icon">
  433. <use xlink:href="#icon-heart-o"></use>
  434. </svg>
  435. </div>
  436. <a @click="downLoad(currentTrack)" class="player-controls__item">
  437. <svg class="icon">
  438. <use xlink:href="#icon-link"></use>
  439. </svg>
  440. </a>
  441. <div class="player-controls__item" @click="prevTrack">
  442. <svg class="icon">
  443. <use xlink:href="#icon-prev"></use>
  444. </svg>
  445. </div>
  446. <div class="player-controls__item" @click="nextTrack">
  447. <svg class="icon">
  448. <use xlink:href="#icon-next"></use>
  449. </svg>
  450. </div>
  451. <div class="player-controls__item -xl js-play" @click="play">
  452. <svg class="icon">
  453. <use xlink:href="#icon-pause" v-if="isTimerPlaying"></use>
  454. <use xlink:href="#icon-play" v-else></use>
  455. </svg>
  456. </div>
  457. </div>
  458. </div>
  459. <div class="progress" ref="progress">
  460. <div class="progress__top">
  461. <div class="album-info" v-if="currentTrack">
  462. <div class="album-info__name">{{ currentTrack.artist }}</div>
  463. <div class="album-info__track">{{ currentTrack.name }}</div>
  464. </div>
  465. <div class="progress__duration">{{ duration }}</div>
  466. </div>
  467. <div class="progress__bar" @click="clickProgress">
  468. <div class="progress__current" :style="{ width: barWidth }"></div>
  469. </div>
  470. <div class="progress__time">{{ currentTime }}</div>
  471. </div>
  472. <div v-cloak></div>
  473. </div>
  474. </div>
  475. <!-- </a-modal> -->
  476. <svg xmlns="http://www.w3.org/2000/svg" hidden xmlns:xlink="http://www.w3.org/1999/xlink">
  477. <defs>
  478. <symbol id="icon-heart-o" viewBox="0 0 32 32">
  479. <title>icon-heart-o</title>
  480. <path
  481. d="M22.88 1.952c-2.72 0-5.184 1.28-6.88 3.456-1.696-2.176-4.16-3.456-6.88-3.456-4.48 0-9.024 3.648-9.024 10.592 0 7.232 7.776 12.704 15.072 17.248 0.256 0.16 0.544 0.256 0.832 0.256s0.576-0.096 0.832-0.256c7.296-4.544 15.072-10.016 15.072-17.248 0-6.944-4.544-10.592-9.024-10.592zM16 26.56c-4.864-3.072-12.736-8.288-12.736-14.016 0-5.088 3.040-7.424 5.824-7.424 2.368 0 4.384 1.504 5.408 4.032 0.256 0.608 0.832 0.992 1.472 0.992s1.248-0.384 1.472-0.992c1.024-2.528 3.040-4.032 5.408-4.032 2.816 0 5.824 2.304 5.824 7.424 0.064 5.728-7.808 10.976-12.672 14.016z"
  482. ></path>
  483. <path
  484. d="M16 30.144c-0.32 0-0.64-0.096-0.896-0.256-7.296-4.576-15.104-10.048-15.104-17.344 0-7.008 4.576-10.688 9.12-10.688 2.656 0 5.152 1.216 6.88 3.392 1.728-2.144 4.224-3.392 6.88-3.392 4.544 0 9.12 3.68 9.12 10.688 0 7.296-7.808 12.768-15.104 17.344-0.256 0.16-0.576 0.256-0.896 0.256zM9.12 2.048c-4.448 0-8.928 3.616-8.928 10.496 0 7.168 7.744 12.64 15.008 17.152 0.48 0.288 1.12 0.288 1.568 0 7.264-4.544 15.008-9.984 15.008-17.152 0-6.88-4.48-10.496-8.928-10.496-2.656 0-5.088 1.216-6.816 3.392l-0.032 0.128-0.064-0.096c-1.696-2.176-4.192-3.424-6.816-3.424zM16 26.688l-0.064-0.032c-3.808-2.4-12.768-8.032-12.768-14.112 0-5.152 3.072-7.52 5.952-7.52 2.432 0 4.48 1.536 5.504 4.096 0.224 0.576 0.768 0.928 1.376 0.928s1.152-0.384 1.376-0.928c1.024-2.56 3.072-4.096 5.504-4.096 2.848 0 5.952 2.336 5.952 7.52 0 6.080-8.96 11.712-12.768 14.112l-0.064 0.032zM9.12 5.248c-2.752 0-5.728 2.304-5.728 7.328 0 5.952 8.8 11.488 12.608 13.92 3.808-2.4 12.608-7.968 12.608-13.92 0-5.024-2.976-7.328-5.728-7.328-2.336 0-4.32 1.472-5.312 3.968-0.256 0.64-0.864 1.056-1.568 1.056s-1.312-0.416-1.568-1.056c-0.992-2.496-2.976-3.968-5.312-3.968z"
  485. ></path>
  486. <path
  487. d="M6.816 20.704c0.384 0.288 0.512 0.704 0.48 1.12 0.224 0.256 0.384 0.608 0.384 0.96 0 0.032 0 0.032 0 0.064 0.16 0.128 0.32 0.256 0.48 0.384 0.128 0.064 0.256 0.16 0.384 0.256 0.096 0.064 0.192 0.16 0.256 0.224 0.8 0.576 1.632 1.12 2.496 1.664 0.416 0.128 0.8 0.256 1.056 0.32 1.984 0.576 4.064 0.8 6.112 0.928 2.688-1.92 5.312-3.904 8-5.792 0.896-1.088 1.92-2.080 2.912-3.104v-7.552c-0.096-0.128-0.192-0.288-0.32-0.416-0.768-1.024-1.184-2.176-1.6-3.296-0.768-0.416-1.536-0.8-2.336-1.12-0.128-0.064-0.256-0.096-0.384-0.16h-21.568v12.992c1.312 0.672 2.496 1.6 3.648 2.528z"
  488. ></path>
  489. </symbol>
  490. <symbol id="icon-heart" viewBox="0 0 32 32">
  491. <title>icon-heart</title>
  492. <path
  493. d="M22.88 1.952c-2.72 0-5.184 1.28-6.88 3.456-1.696-2.176-4.16-3.456-6.88-3.456-4.48 0-9.024 3.648-9.024 10.592 0 7.232 7.776 12.704 15.072 17.248 0.256 0.16 0.544 0.256 0.832 0.256s0.576-0.096 0.832-0.256c7.296-4.544 15.072-10.016 15.072-17.248 0-6.944-4.544-10.592-9.024-10.592zM16 26.56c-4.864-3.072-12.736-8.288-12.736-14.016 0-5.088 3.040-7.424 5.824-7.424 2.368 0 4.384 1.504 5.408 4.032 0.256 0.608 0.832 0.992 1.472 0.992s1.248-0.384 1.472-0.992c1.024-2.528 3.040-4.032 5.408-4.032 2.816 0 5.824 2.304 5.824 7.424 0.064 5.728-7.808 10.976-12.672 14.016z"
  494. ></path>
  495. <path
  496. d="M16 30.144c-0.32 0-0.64-0.096-0.896-0.256-7.296-4.576-15.104-10.048-15.104-17.344 0-7.008 4.576-10.688 9.12-10.688 2.656 0 5.152 1.216 6.88 3.392 1.728-2.144 4.224-3.392 6.88-3.392 4.544 0 9.12 3.68 9.12 10.688 0 7.296-7.808 12.768-15.104 17.344-0.256 0.16-0.576 0.256-0.896 0.256zM9.12 2.048c-4.448 0-8.928 3.616-8.928 10.496 0 7.168 7.744 12.64 15.008 17.152 0.48 0.288 1.12 0.288 1.568 0 7.264-4.544 15.008-9.984 15.008-17.152 0-6.88-4.48-10.496-8.928-10.496-2.656 0-5.088 1.216-6.816 3.392l-0.032 0.128-0.064-0.096c-1.696-2.176-4.192-3.424-6.816-3.424zM16 26.688l-0.064-0.032c-3.808-2.4-12.768-8.032-12.768-14.112 0-5.152 3.072-7.52 5.952-7.52 2.432 0 4.48 1.536 5.504 4.096 0.224 0.576 0.768 0.928 1.376 0.928s1.152-0.384 1.376-0.928c1.024-2.56 3.072-4.096 5.504-4.096 2.848 0 5.952 2.336 5.952 7.52 0 6.080-8.96 11.712-12.768 14.112l-0.064 0.032zM9.12 5.248c-2.752 0-5.728 2.304-5.728 7.328 0 5.952 8.8 11.488 12.608 13.92 3.808-2.4 12.608-7.968 12.608-13.92 0-5.024-2.976-7.328-5.728-7.328-2.336 0-4.32 1.472-5.312 3.968-0.256 0.64-0.864 1.056-1.568 1.056s-1.312-0.416-1.568-1.056c-0.992-2.496-2.976-3.968-5.312-3.968z"
  497. ></path>
  498. </symbol>
  499. <symbol id="icon-infinity" viewBox="0 0 32 32">
  500. <title>icon-infinity</title>
  501. <path
  502. d="M29.312 20.832c-1.28 1.28-3.008 1.984-4.832 1.984s-3.52-0.704-4.832-1.984c-0.032-0.032-0.224-0.224-0.256-0.256v0 1.28c0 0.448-0.352 0.8-0.8 0.8s-0.8-0.352-0.8-0.8v-3.168c0-0.448 0.352-0.8 0.8-0.8h3.168c0.448 0 0.8 0.352 0.8 0.8s-0.352 0.8-0.8 0.8h-1.28c0.032 0.032 0.224 0.224 0.256 0.256 0.992 0.992 2.304 1.536 3.68 1.536 1.408 0 2.72-0.544 3.68-1.536 0.992-0.992 1.536-2.304 1.536-3.68s-0.544-2.72-1.536-3.68c-0.992-0.992-2.304-1.536-3.68-1.536-1.408 0-2.72 0.544-3.68 1.536l-8.416 8.448c-1.312 1.312-3.072 1.984-4.832 1.984s-3.488-0.672-4.832-1.984c-2.656-2.656-2.656-6.976 0-9.632s6.976-2.656 9.632 0c0.032 0.032 0.16 0.16 0.192 0.192l0.064 0.064v-1.28c0-0.448 0.352-0.8 0.8-0.8s0.8 0.352 0.8 0.8v3.168c0 0.448-0.352 0.8-0.8 0.8h-3.168c-0.448 0-0.8-0.352-0.8-0.8s0.352-0.8 0.8-0.8h1.28l-0.096-0.064c-0.032-0.032-0.16-0.16-0.192-0.192-0.992-0.992-2.304-1.536-3.68-1.536s-2.72 0.544-3.68 1.536c-2.048 2.048-2.048 5.344 0 7.392 0.992 0.992 2.304 1.536 3.68 1.536s2.72-0.544 3.68-1.536l8.512-8.512c1.28-1.28 3.008-1.984 4.832-1.984s3.52 0.704 4.832 1.984c2.624 2.656 2.624 7.008-0.032 9.664z"
  503. ></path>
  504. <path
  505. d="M24.512 23.488c-1.6 0-3.136-0.512-4.416-1.44-0.128 0.704-0.736 1.248-1.44 1.248-0.8 0-1.472-0.672-1.472-1.472v-3.168c0-0.8 0.672-1.472 1.472-1.472h3.168c0.8 0 1.472 0.672 1.472 1.472 0 0.608-0.384 1.152-0.928 1.376 0.64 0.352 1.376 0.544 2.144 0.544 1.216 0 2.368-0.48 3.2-1.344 0.864-0.864 1.344-1.984 1.344-3.2s-0.48-2.368-1.344-3.2c-0.864-0.864-1.984-1.344-3.2-1.344s-2.368 0.48-3.2 1.344l-8.512 8.48c-1.408 1.408-3.296 2.176-5.312 2.176s-3.872-0.768-5.312-2.176c-2.912-2.912-2.912-7.68 0-10.592 1.408-1.408 3.296-2.176 5.312-2.176 0 0 0 0 0 0 1.6 0 3.136 0.512 4.416 1.44 0.128-0.704 0.736-1.248 1.472-1.248 0.8 0 1.472 0.672 1.472 1.472v3.168c0 0.8-0.672 1.472-1.472 1.472h-3.168c-0.8 0-1.472-0.672-1.472-1.472 0-0.608 0.384-1.152 0.928-1.376-0.64-0.352-1.376-0.544-2.144-0.544-1.216 0-2.368 0.48-3.2 1.344-1.76 1.76-1.76 4.64 0 6.432 0.864 0.864 2.016 1.344 3.2 1.344 1.216 0 2.368-0.48 3.2-1.344l8.48-8.544c1.408-1.408 3.296-2.208 5.312-2.208s3.872 0.768 5.312 2.208c1.408 1.408 2.176 3.296 2.176 5.312s-0.768 3.872-2.208 5.312v0c0 0 0 0 0 0-1.408 1.408-3.296 2.176-5.28 2.176zM18.752 18.912l1.44 1.44c1.152 1.152 2.688 1.792 4.32 1.792s3.168-0.64 4.32-1.792v0c1.152-1.152 1.792-2.688 1.792-4.32s-0.64-3.168-1.792-4.32c-1.152-1.152-2.688-1.792-4.352-1.792-1.632 0-3.168 0.64-4.32 1.792l-8.48 8.448c-1.12 1.12-2.592 1.728-4.16 1.728s-3.072-0.608-4.16-1.728c-2.304-2.304-2.304-6.048 0-8.352 1.12-1.12 2.592-1.728 4.16-1.728s3.072 0.608 4.16 1.728l1.44 1.408h-2.912c-0.064 0-0.128 0.064-0.128 0.128s0.064 0.128 0.128 0.128h3.168c0.064 0 0.128-0.064 0.128-0.128v-3.168c0-0.064-0.064-0.128-0.128-0.128s-0.128 0.064-0.128 0.128v2.912l-1.408-1.408c-1.152-1.152-2.688-1.792-4.352-1.792-1.632 0-3.168 0.64-4.32 1.792-2.4 2.4-2.4 6.272 0 8.672 1.152 1.152 2.688 1.792 4.32 1.792s3.168-0.64 4.32-1.792l8.512-8.512c1.12-1.12 2.592-1.728 4.16-1.728s3.072 0.608 4.16 1.728c1.12 1.12 1.728 2.592 1.728 4.16s-0.608 3.072-1.728 4.16c-1.12 1.12-2.592 1.728-4.16 1.728s-3.072-0.608-4.16-1.728l-1.408-1.408h2.912c0.064 0 0.128-0.064 0.128-0.128s-0.064-0.128-0.128-0.128h-3.168c-0.064 0-0.128 0.064-0.128 0.128v3.168c0 0.064 0.064 0.128 0.128 0.128s0.128-0.064 0.128-0.128v-2.88z"
  506. ></path>
  507. </symbol>
  508. <symbol id="icon-pause" viewBox="0 0 32 32">
  509. <title>icon-pause</title>
  510. <path
  511. d="M16 0.32c-8.64 0-15.68 7.040-15.68 15.68s7.040 15.68 15.68 15.68 15.68-7.040 15.68-15.68-7.040-15.68-15.68-15.68zM16 29.216c-7.296 0-13.216-5.92-13.216-13.216s5.92-13.216 13.216-13.216 13.216 5.92 13.216 13.216-5.92 13.216-13.216 13.216z"
  512. ></path>
  513. <path
  514. d="M16 32c-8.832 0-16-7.168-16-16s7.168-16 16-16 16 7.168 16 16-7.168 16-16 16zM16 0.672c-8.448 0-15.328 6.88-15.328 15.328s6.88 15.328 15.328 15.328c8.448 0 15.328-6.88 15.328-15.328s-6.88-15.328-15.328-15.328zM16 29.568c-7.488 0-13.568-6.080-13.568-13.568s6.080-13.568 13.568-13.568c7.488 0 13.568 6.080 13.568 13.568s-6.080 13.568-13.568 13.568zM16 3.104c-7.104 0-12.896 5.792-12.896 12.896s5.792 12.896 12.896 12.896c7.104 0 12.896-5.792 12.896-12.896s-5.792-12.896-12.896-12.896z"
  515. ></path>
  516. <path
  517. d="M12.16 22.336v0c-0.896 0-1.6-0.704-1.6-1.6v-9.472c0-0.896 0.704-1.6 1.6-1.6v0c0.896 0 1.6 0.704 1.6 1.6v9.504c0 0.864-0.704 1.568-1.6 1.568z"
  518. ></path>
  519. <path
  520. d="M19.84 22.336v0c-0.896 0-1.6-0.704-1.6-1.6v-9.472c0-0.896 0.704-1.6 1.6-1.6v0c0.896 0 1.6 0.704 1.6 1.6v9.504c0 0.864-0.704 1.568-1.6 1.568z"
  521. ></path>
  522. </symbol>
  523. <symbol id="icon-play" viewBox="0 0 32 32">
  524. <title>icon-play</title>
  525. <path
  526. d="M21.216 15.168l-7.616-5.088c-0.672-0.416-1.504 0.032-1.504 0.832v10.176c0 0.8 0.896 1.248 1.504 0.832l7.616-5.088c0.576-0.416 0.576-1.248 0-1.664z"
  527. ></path>
  528. <path
  529. d="M13.056 22.4c-0.224 0-0.416-0.064-0.608-0.16-0.448-0.224-0.704-0.672-0.704-1.152v-10.176c0-0.48 0.256-0.928 0.672-1.152s0.928-0.224 1.344 0.064l7.616 5.088c0.384 0.256 0.608 0.672 0.608 1.088s-0.224 0.864-0.608 1.088l-7.616 5.088c-0.192 0.16-0.448 0.224-0.704 0.224zM13.056 10.272c-0.096 0-0.224 0.032-0.32 0.064-0.224 0.128-0.352 0.32-0.352 0.576v10.176c0 0.256 0.128 0.48 0.352 0.576 0.224 0.128 0.448 0.096 0.64-0.032l7.616-5.088c0.192-0.128 0.288-0.32 0.288-0.544s-0.096-0.416-0.288-0.544l-7.584-5.088c-0.096-0.064-0.224-0.096-0.352-0.096z"
  530. ></path>
  531. <path
  532. d="M16 0.32c-8.64 0-15.68 7.040-15.68 15.68s7.040 15.68 15.68 15.68 15.68-7.040 15.68-15.68-7.040-15.68-15.68-15.68zM16 29.216c-7.296 0-13.216-5.92-13.216-13.216s5.92-13.216 13.216-13.216 13.216 5.92 13.216 13.216-5.92 13.216-13.216 13.216z"
  533. ></path>
  534. <path
  535. d="M16 32c-8.832 0-16-7.168-16-16s7.168-16 16-16 16 7.168 16 16-7.168 16-16 16zM16 0.672c-8.448 0-15.328 6.88-15.328 15.328s6.88 15.328 15.328 15.328c8.448 0 15.328-6.88 15.328-15.328s-6.88-15.328-15.328-15.328zM16 29.568c-7.488 0-13.568-6.080-13.568-13.568s6.080-13.568 13.568-13.568c7.488 0 13.568 6.080 13.568 13.568s-6.080 13.568-13.568 13.568zM16 3.104c-7.104 0-12.896 5.792-12.896 12.896s5.792 12.896 12.896 12.896c7.104 0 12.896-5.792 12.896-12.896s-5.792-12.896-12.896-12.896z"
  536. ></path>
  537. </symbol>
  538. <symbol id="icon-link" viewBox="0 0 32 32">
  539. <title>link</title>
  540. <path
  541. d="M23.584 17.92c0 0.864 0 1.728 0 2.56 0 1.312 0 2.656 0 3.968 0 0.352 0.032 0.736-0.032 1.12 0.032-0.16 0.032-0.288 0.064-0.448-0.032 0.224-0.096 0.448-0.16 0.64 0.064-0.128 0.128-0.256 0.16-0.416-0.096 0.192-0.192 0.384-0.32 0.576 0.096-0.128 0.16-0.224 0.256-0.352-0.128 0.16-0.288 0.32-0.48 0.48 0.128-0.096 0.224-0.16 0.352-0.256-0.192 0.128-0.352 0.256-0.576 0.32 0.128-0.064 0.256-0.128 0.416-0.16-0.224 0.096-0.416 0.16-0.64 0.16 0.16-0.032 0.288-0.032 0.448-0.064-0.256 0.032-0.512 0.032-0.768 0.032-0.448 0-0.896 0-1.312 0-1.472 0-2.976 0-4.448 0-1.824 0-3.616 0-5.44 0-1.568 0-3.104 0-4.672 0-0.736 0-1.44 0-2.176 0-0.128 0-0.224 0-0.352-0.032 0.16 0.032 0.288 0.032 0.448 0.064-0.224-0.032-0.448-0.096-0.64-0.16 0.128 0.064 0.256 0.128 0.416 0.16-0.192-0.096-0.384-0.192-0.576-0.32 0.128 0.096 0.224 0.16 0.352 0.256-0.16-0.128-0.32-0.288-0.48-0.48 0.096 0.128 0.16 0.224 0.256 0.352-0.128-0.192-0.256-0.352-0.32-0.576 0.064 0.128 0.128 0.256 0.16 0.416-0.096-0.224-0.16-0.416-0.16-0.64 0.032 0.16 0.032 0.288 0.064 0.448-0.032-0.256-0.032-0.512-0.032-0.768 0-0.448 0-0.896 0-1.312 0-1.472 0-2.976 0-4.448 0-1.824 0-3.616 0-5.44 0-1.568 0-3.104 0-4.672 0-0.736 0-1.44 0-2.176 0-0.128 0-0.224 0.032-0.352-0.032 0.16-0.032 0.288-0.064 0.448 0.032-0.224 0.096-0.448 0.16-0.64-0.064 0.128-0.128 0.256-0.16 0.416 0.096-0.192 0.192-0.384 0.32-0.576-0.096 0.128-0.16 0.224-0.256 0.352 0.128-0.16 0.288-0.32 0.48-0.48-0.128 0.096-0.224 0.16-0.352 0.256 0.192-0.128 0.352-0.256 0.576-0.32-0.128 0.064-0.256 0.128-0.416 0.16 0.224-0.096 0.416-0.16 0.64-0.16-0.16 0.032-0.288 0.032-0.448 0.064 0.48-0.064 0.96-0.032 1.44-0.032 0.992 0 1.952 0 2.944 0 1.216 0 2.432 0 3.616 0 1.056 0 2.112 0 3.168 0 0.512 0 1.024 0 1.536 0 0 0 0 0 0.032 0 0.448 0 0.896-0.192 1.184-0.48s0.512-0.768 0.48-1.184c-0.032-0.448-0.16-0.896-0.48-1.184s-0.736-0.48-1.184-0.48c-0.64 0-1.28 0-1.92 0-1.408 0-2.816 0-4.224 0-1.44 0-2.848 0-4.256 0-0.672 0-1.344 0-2.016 0-0.736 0-1.472 0.192-2.112 0.576s-1.216 0.96-1.568 1.6c-0.384 0.64-0.544 1.376-0.544 2.144 0 0.672 0 1.376 0 2.048 0 1.28 0 2.56 0 3.84 0 1.504 0 3.040 0 4.544 0 1.408 0 2.848 0 4.256 0 0.992 0 1.952 0 2.944 0 0.224 0 0.448 0 0.64 0 0.864 0.224 1.76 0.768 2.464 0.16 0.192 0.288 0.384 0.48 0.576s0.384 0.352 0.608 0.512c0.32 0.224 0.64 0.384 1.024 0.512 0.448 0.16 0.928 0.224 1.408 0.224 0.16 0 0.32 0 0.48 0 0.896 0 1.792 0 2.72 0 1.376 0 2.784 0 4.16 0 1.536 0 3.040 0 4.576 0 1.312 0 2.656 0 3.968 0 0.768 0 1.536 0 2.336 0 0.416 0 0.832-0.032 1.248-0.128 1.504-0.32 2.784-1.6 3.104-3.104 0.128-0.544 0.128-1.056 0.128-1.568 0-0.608 0-1.184 0-1.792 0-1.408 0-2.816 0-4.224 0-0.256 0-0.512 0-0.768 0-0.448-0.192-0.896-0.48-1.184s-0.768-0.512-1.184-0.48c-0.448 0.032-0.896 0.16-1.184 0.48-0.384 0.384-0.576 0.768-0.576 1.248v0z"
  542. ></path>
  543. <path
  544. d="M32 11.232c0-0.8 0-1.568 0-2.368 0-1.248 0-2.528 0-3.776 0-0.288 0-0.576 0-0.864 0-0.896-0.768-1.696-1.696-1.696-0.8 0-1.568 0-2.368 0-1.248 0-2.528 0-3.776 0-0.288 0-0.576 0-0.864 0-0.448 0-0.896 0.192-1.184 0.48s-0.512 0.768-0.48 1.184c0.032 0.448 0.16 0.896 0.48 1.184s0.736 0.48 1.184 0.48c0.8 0 1.568 0 2.368 0 1.248 0 2.528 0 3.776 0 0.288 0 0.576 0 0.864 0-0.576-0.576-1.12-1.12-1.696-1.696 0 0.8 0 1.568 0 2.368 0 1.248 0 2.528 0 3.776 0 0.288 0 0.576 0 0.864 0 0.448 0.192 0.896 0.48 1.184s0.768 0.512 1.184 0.48c0.448-0.032 0.896-0.16 1.184-0.48 0.352-0.256 0.544-0.64 0.544-1.12v0z"
  545. ></path>
  546. <path
  547. d="M15.040 21.888c0.16-0.16 0.288-0.288 0.448-0.448 0.384-0.384 0.8-0.8 1.184-1.184 0.608-0.608 1.184-1.184 1.792-1.792 0.704-0.704 1.44-1.44 2.176-2.176 0.8-0.8 1.568-1.568 2.368-2.368s1.6-1.6 2.4-2.4c0.736-0.736 1.504-1.504 2.24-2.24 0.64-0.64 1.248-1.248 1.888-1.888 0.448-0.448 0.896-0.896 1.344-1.344 0.224-0.224 0.448-0.416 0.64-0.64 0 0 0.032-0.032 0.032-0.032 0.32-0.32 0.48-0.768 0.48-1.184s-0.192-0.896-0.48-1.184c-0.32-0.288-0.736-0.512-1.184-0.48-0.512 0.032-0.928 0.16-1.248 0.48-0.16 0.16-0.288 0.288-0.448 0.448-0.384 0.384-0.8 0.8-1.184 1.184-0.608 0.608-1.184 1.184-1.792 1.792-0.704 0.704-1.44 1.44-2.176 2.176-0.8 0.8-1.568 1.568-2.368 2.368s-1.6 1.6-2.4 2.4c-0.736 0.736-1.504 1.504-2.24 2.24-0.64 0.64-1.248 1.248-1.888 1.888-0.448 0.448-0.896 0.896-1.344 1.344-0.224 0.224-0.448 0.416-0.64 0.64 0 0-0.032 0.032-0.032 0.032-0.32 0.32-0.48 0.768-0.48 1.184s0.192 0.896 0.48 1.184c0.32 0.288 0.736 0.512 1.184 0.48 0.48 0 0.928-0.16 1.248-0.48v0z"
  548. ></path>
  549. </symbol>
  550. <symbol id="icon-next" viewBox="0 0 32 32">
  551. <title>next</title>
  552. <path
  553. d="M2.304 18.304h14.688l-4.608 4.576c-0.864 0.864-0.864 2.336 0 3.232 0.864 0.864 2.336 0.864 3.232 0l8.448-8.48c0.864-0.864 0.864-2.336 0-3.232l-8.448-8.448c-0.448-0.448-1.056-0.672-1.632-0.672s-1.184 0.224-1.632 0.672c-0.864 0.864-0.864 2.336 0 3.232l4.64 4.576h-14.688c-1.248 0-2.304 0.992-2.304 2.272s1.024 2.272 2.304 2.272z"
  554. ></path>
  555. <path
  556. d="M29.696 26.752c1.248 0 2.304-1.024 2.304-2.304v-16.928c0-1.248-1.024-2.304-2.304-2.304s-2.304 1.024-2.304 2.304v16.928c0.064 1.28 1.056 2.304 2.304 2.304z"
  557. ></path>
  558. </symbol>
  559. <symbol id="icon-prev" viewBox="0 0 32 32">
  560. <title>prev</title>
  561. <path
  562. d="M29.696 13.696h-14.688l4.576-4.576c0.864-0.864 0.864-2.336 0-3.232-0.864-0.864-2.336-0.864-3.232 0l-8.448 8.48c-0.864 0.864-0.864 2.336 0 3.232l8.448 8.448c0.448 0.448 1.056 0.672 1.632 0.672s1.184-0.224 1.632-0.672c0.864-0.864 0.864-2.336 0-3.232l-4.608-4.576h14.688c1.248 0 2.304-1.024 2.304-2.304s-1.024-2.24-2.304-2.24z"
  563. ></path>
  564. <path
  565. d="M2.304 5.248c-1.248 0-2.304 1.024-2.304 2.304v16.928c0 1.248 1.024 2.304 2.304 2.304s2.304-1.024 2.304-2.304v-16.928c-0.064-1.28-1.056-2.304-2.304-2.304z"
  566. ></path>
  567. </symbol>
  568. </defs>
  569. </svg>
  570. </div>
  571. </template>
  572. <script>
  573. import { defaultSheetId } from '@/config'
  574. import { postAction, downFilePost } from '../../../api/manage'
  575. export default {
  576. name: 'Music-dy',
  577. components: {},
  578. filters: {},
  579. data() {
  580. return {
  581. showMusic: false,
  582. music: '',
  583. author: '',
  584. options: [],
  585. dataList: [],
  586. loading: false,
  587. type: '',
  588. pagination: {
  589. current: 1,
  590. pageSize: 10,
  591. showTotal: (total, range) => {
  592. return range[0] + '-' + range[1] + ' 共' + total + '条'
  593. },
  594. showQuickJumper: true,
  595. total: 0,
  596. onChange: (current) => {
  597. // 切换分页时的回调,
  598. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  599. this.pagination.current = current
  600. this.getDataList({
  601. pageNo: current,
  602. pageSize: 10,
  603. typeValue: this.type,
  604. musicName: this.music,
  605. author: this.author,
  606. })
  607. },
  608. },
  609. audio: null,
  610. circleLeft: null,
  611. barWidth: null,
  612. duration: null,
  613. currentTime: null,
  614. isTimerPlaying: false,
  615. tracks: [
  616. {
  617. name: 'Mekanın Sahibi',
  618. artist: 'Norm Ender',
  619. cover: 'img/1.jpg',
  620. source: 'http://p3-dy.byteimg.com/obj/iesmusic-cn-local/v1/h/9f3220f5bc1e331186e98a5b53929b08',
  621. url: 'http://p3-dy.byteimg.com/obj/iesmusic-cn-local/v1/h/9f3220f5bc1e331186e98a5b53929b08',
  622. favorited: false,
  623. },
  624. ],
  625. currentTrack: null,
  626. currentTrackIndex: 0,
  627. transitionName: null,
  628. }
  629. },
  630. computed: {},
  631. watch: {},
  632. mounted() {
  633. this.$nextTick(() => {
  634. postAction('/ctop/dictMusicType/listAll').then((res) => {
  635. if (res.data) {
  636. this.options = res.data.map((item) => {
  637. return {
  638. label: item.extTypeZh,
  639. value: item.extTypeZh,
  640. children: item.detail.map((i) => {
  641. return {
  642. label: i.extTypeValueZh,
  643. value: i.extTypeValueZh,
  644. }
  645. }),
  646. }
  647. })
  648. }
  649. })
  650. this.getDataList()
  651. })
  652. },
  653. created() {},
  654. watch: {
  655. showMusic(n, o) {
  656. if (!n) {
  657. this.currentTrack = []
  658. this.audio.pause()
  659. this.isTimerPlaying = false
  660. }
  661. },
  662. },
  663. methods: {
  664. downLoad(item) {
  665. downFilePost('/ctop/bytedanceMusicInfo/downLoad?id=' + item.musicId, {}).then((res) => {
  666. const blob = new Blob([res], { type: 'audio/mpeg' })
  667. const a = document.createElement('a')
  668. const url = window.URL.createObjectURL(blob)
  669. const filename = item.musicInfo.name
  670. a.href = url
  671. a.download = filename
  672. a.click()
  673. window.URL.revokeObjectURL(url)
  674. })
  675. },
  676. searchQuery() {
  677. this.getDataList({ pageNo: 1, pageSize: 10, typeValue: this.type, musicName: this.music, author: this.author })
  678. },
  679. playMusic(index) {
  680. this.tracks = this.dataList.map((item) => {
  681. return {
  682. name: item.musicInfo.author,
  683. artist: item.musicInfo.name,
  684. cover: require('@assets/img/default.png'),
  685. source: item.musicInfo.musicUrl,
  686. url: item.musicInfo.musicUrl,
  687. favorited: false,
  688. musicId:item.musicInfo.id
  689. }
  690. })
  691. this.$nextTick(() => {
  692. let vm = this
  693. this.currentTrack = this.tracks[index]
  694. this.audio = new Audio()
  695. this.audio.src = this.currentTrack.source
  696. this.audio.ontimeupdate = function () {
  697. vm.generateTime()
  698. }
  699. this.audio.onloadedmetadata = function () {
  700. vm.generateTime()
  701. }
  702. this.audio.onended = function () {
  703. vm.nextTrack()
  704. this.isTimerPlaying = true
  705. }
  706. // this is optional (for preload covers)
  707. for (let index = 0; index < this.tracks.length; index++) {
  708. const element = this.tracks[index]
  709. let link = document.createElement('link')
  710. link.rel = 'prefetch'
  711. link.href = element.cover
  712. link.as = 'image'
  713. document.head.appendChild(link)
  714. }
  715. this.showMusic = true
  716. })
  717. },
  718. onChangeType(e) {
  719. if (e.length > 0) {
  720. this.type = e[1]
  721. this.pagination.current = 1
  722. this.getDataList({ pageNo: 1, pageSize: 10, typeValue: this.type, musicName: this.music, author: this.author })
  723. } else {
  724. this.getDataList({ pageNo: 1, pageSize: 10, typeValue: '', musicName: this.music, author: this.author })
  725. }
  726. },
  727. filter(inputValue, path) {
  728. return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
  729. },
  730. getDataList(params = { pageNo: 1, pageSize: 10, typeValue: '', musicName: '', author: '' }) {
  731. // this.dataList = []
  732. this.loading = true
  733. postAction(
  734. `/ctop/bytedanceMusicType/list?pageNo=${params.pageNo}&pageSize=${params.pageSize}&typeValue=${params.typeValue}&author=${params.author}&musicName=${params.musicName}`
  735. ).then((res) => {
  736. console.log(res)
  737. if (res.success) {
  738. this.loading = false
  739. this.dataList = res.result.records
  740. this.pagination.total = res.result.total
  741. } else {
  742. this.loading = false
  743. }
  744. })
  745. },
  746. play() {
  747. if (this.audio.paused) {
  748. this.audio.play()
  749. this.isTimerPlaying = true
  750. } else {
  751. this.audio.pause()
  752. this.isTimerPlaying = false
  753. }
  754. },
  755. generateTime() {
  756. let width = (100 / this.audio.duration) * this.audio.currentTime
  757. this.barWidth = width + '%'
  758. this.circleLeft = width + '%'
  759. let durmin = Math.floor(this.audio.duration / 60)
  760. let dursec = Math.floor(this.audio.duration - durmin * 60)
  761. let curmin = Math.floor(this.audio.currentTime / 60)
  762. let cursec = Math.floor(this.audio.currentTime - curmin * 60)
  763. if (durmin < 10) {
  764. durmin = '0' + durmin
  765. }
  766. if (dursec < 10) {
  767. dursec = '0' + dursec
  768. }
  769. if (curmin < 10) {
  770. curmin = '0' + curmin
  771. }
  772. if (cursec < 10) {
  773. cursec = '0' + cursec
  774. }
  775. this.duration = durmin + ':' + dursec
  776. this.currentTime = curmin + ':' + cursec
  777. },
  778. updateBar(x) {
  779. let progress = this.$refs.progress
  780. let maxduration = this.audio.duration
  781. let position = x - progress.offsetLeft
  782. let percentage = (100 * position) / progress.offsetWidth
  783. if (percentage > 100) {
  784. percentage = 100
  785. }
  786. if (percentage < 0) {
  787. percentage = 0
  788. }
  789. this.barWidth = percentage + '%'
  790. this.circleLeft = percentage + '%'
  791. this.audio.currentTime = (maxduration * percentage) / 100
  792. this.audio.play()
  793. },
  794. clickProgress(e) {
  795. this.isTimerPlaying = true
  796. this.audio.pause()
  797. this.updateBar(e.pageX)
  798. },
  799. prevTrack() {
  800. this.transitionName = 'scale-in'
  801. this.isShowCover = false
  802. if (this.currentTrackIndex > 0) {
  803. this.currentTrackIndex--
  804. } else {
  805. this.currentTrackIndex = this.tracks.length - 1
  806. }
  807. this.currentTrack = this.tracks[this.currentTrackIndex]
  808. this.resetPlayer()
  809. },
  810. nextTrack() {
  811. this.transitionName = 'scale-out'
  812. this.isShowCover = false
  813. if (this.currentTrackIndex < this.tracks.length - 1) {
  814. this.currentTrackIndex++
  815. } else {
  816. this.currentTrackIndex = 0
  817. }
  818. this.currentTrack = this.tracks[this.currentTrackIndex]
  819. this.resetPlayer()
  820. },
  821. resetPlayer() {
  822. this.barWidth = 0
  823. this.circleLeft = 0
  824. this.audio.currentTime = 0
  825. this.audio.src = this.currentTrack.source
  826. setTimeout(() => {
  827. if (this.isTimerPlaying) {
  828. this.audio.play()
  829. } else {
  830. this.audio.pause()
  831. }
  832. }, 300)
  833. },
  834. favorite() {
  835. this.tracks[this.currentTrackIndex].favorited = !this.tracks[this.currentTrackIndex].favorited
  836. },
  837. },
  838. }
  839. </script>
  840. <style lang="less">
  841. .music {
  842. padding: 25px;
  843. width: 100%;
  844. max-width: 1750px;
  845. margin: 0 auto;
  846. height: 100%;
  847. box-sizing: border-box;
  848. overflow: hidden;
  849. position: relative;
  850. /*遮罩*/
  851. .mmPlayer-mask,
  852. .mmPlayer-bg {
  853. position: absolute;
  854. top: 0;
  855. right: 0;
  856. left: 0;
  857. bottom: 0;
  858. }
  859. }
  860. </style>