https://img.ithome.com/app/songs/index.html

1<!DOCTYPE html>
2<html lang="zh-CN">
3
4<head>
5    <meta charset="utf-8" />
6    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7    <meta name="viewport" content="user-scalable=no, width=device-width">
8    <meta name="referrer" content="no-referrer" />
9    <title>IT之家之歌「寻找未来」</title>
10    <meta name="description" content="" />
11    <meta name="keywords" content="" />
12    <link href="css/normalize.css" rel="stylesheet" />
13    <link href="css/style.css?v=202001101690" rel="stylesheet" />
14</head>
15
16<body>
17    

17<script>
18        if (navigator.userAgent.indexOf("/night/") !== -1) {
19            document.getElementsByTagName("body")[0].classList.add("night");
20        }
21    </script>

21
22    <div id="app" v-cloak>
23        <h1
24           v-if="showTitle" v-bind:style="'top:' + statusBarHeight + 'px;line-height:' + titleBarHeight +'px;height:'+ titleBarHeight+'px;'">
25            IT之家之歌「寻找未来」</h1>
26        <!-- <span class="edition">远征版</span> -->
27        <div class="lrc" @touchstart="lrcTouchStart($event)" @touchmove="lrcTouchMove($event)">
28            <div class="lry-header-placeholder" v-bind:style="'height:' + (lrcHeight*1/3) + 'px;'"></div>
29            <span
30                v-bind:class="'lrc-line lrc-line-' + index + (currentLrcIndex === index && currentLrcIndex > 0 ? ' active ':'')"
31                v-for="(line, index) in lrcLines" v-html='line.lry'>
32            </span>
33            <div class="lry-header-placeholder" v-bind:style="'height:' + (lrcHeight*2/3) + 'px;'"></div>
34        </div>
35        <div v-if="lrcLines.length > 0" class="tool-bar">
36            <span class="bar-btn switch" v-on:click.stop="switchEdition()" ><img src="./imgs/edition.png"/><span class="edition-name">{{editionName}}</span></span>
37            <span class="bar-btn comment" v-if="showComment" v-on:click.stop="openComment()" ><img src="./imgs/comment.png"/><span class="comment-count">{{commentCount}}</span></span>
38        </div>
39        <div v-if="lrcLines.length > 0" id="player-view">
40            <span class="play-time">{{playedLength}}</span>
41            <span class="play-progressbar" @touchmove="progressTouchMove($event)" @touchend="progressTouchEnd($event)"
42                v-on:click="cickProgressbar($event)">
43                <div class="play-progressbar-inner">
44                    <span class="current-progress" v-bind:style="'width:'+ progress +'%;'"></span>
45                    <span class="progress-dot" @touchstart="progressTouchStart($event)"
46                        v-bind:style="'left:calc('+ progress +'% - 6px);'"></span>
47                </div>
48            </span>
49            <span class="play-time">{{totalLength}}</span>
50        </div>
51        <div v-if="lrcLines.length > 0" v-bind:class="'play-btn ' + (paused ? 'paused':'')">
52            <div v-if="status === 1" class="loading"></div>
53            <img v-if="status !== 1" v-bind:src="paused ? './imgs/play.png':'./imgs/pause.png'"
54                v-on:click.stop="switchPause()" />
55        </div>
56    </div>
57    <audio id="player" controls=true></audio>
58    

58<script src="//s1.pstatp.com/cdn/expire-1-M/vue/2.6.10/vue.min.js?v=202001101661"></script>

58
59    

59<script>(window.Vue || document.write("

59<script src='https:\/\/img.ruanmei.com\/btd\/cdn\/expire-1-M\/vue\/2.6.10\/vue.min.js?v=202001101661'><\/script>"));</script>

59
60    

60<script src="//dat.ruanmei.com/lib/rm-js-sdk.min.js?v=202001101661"></script>

60
61    

61<script src="js/main.js?v=202301101687"></script>

61

62<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"10b363db6f2b4f4a8d897c5b2bd1aa8a","r":1,"spa":2}' crossorigin="anonymous"></script>

62
63</body>
64
65</html>