audio歌詞高亮顯示,歌詞和歌曲可以點選切換(Vue)
阿新 • • 發佈:2019-01-08
效果:
歌詞顯示主要原始碼:
<link href="rabbit-lyrics/rabbit-lyrics.css" rel="stylesheet" type="text/css" />
<script src="rabbit-lyrics/rabbit-lyrics.js" type="text/javascript"></script>
下載rabbit-lyrics參考 https://mp.csdn.net/mdeditor/85112513#
HTML
<div id="lyrics-1" data-media="#myaudio" data-height="100" style="display: none;"></div> <div id="audioInfo"> <audio id="myaudio" :src="song.musicUrlAudio" ref="audio" autoplay @pause="onPause" @play="onPlay" @timeupdate="onTimeupdate" @loadedmetadata="onLoadedmetadata" @error="error" @ended="nextMusic"> </audio> </div>
JavaScript
var app = new Vue(){ created: function () { this.readLyric(); } preMusic() { this.readLyric(); }, nextMusic() { this.readLyric(); }, methods:{ readLyric() { var btnmusic = document.getElementById('musicImage'); var btnlyrics = document.getElementById('lyrics-1') if (this.song.musicUrlLyric) { btnmusic.style.display = 'block'; btnlyrics.style.display = 'none'; fetch(this.song.musicUrlLyric).then(function (response) { return response.text(); console.log(response) }).then(function (text) { parseLyric(text); }); btnmusic.addEventListener("click", click); function click(e) { //可為touchstart、touchmove事件加上preventDefault從而阻止觸控時瀏覽器的縮放、滾動條滾動等 e.preventDefault(); btnmusic.style.display = 'none'; btnlyrics.style.display = 'block'; }; btnlyrics.addEventListener("click", click2); function click2(e) { e.preventDefault(); btnmusic.style.display = 'block'; btnlyrics.style.display = 'none'; }; } else { btnlyrics.style.display = 'none'; btnmusic.style.display = 'block'; } }, } } function parseLyric(text) { document.getElementById('lyrics-1').innerHTML = text; new RabbitLyrics({ element: document.getElementById('lyrics-1'), mediaElement: document.getElementById('myaudio'), }) }
參考我的欄目:https://blog.csdn.net/fengtingyan/article/category/8542284