Пусть работа сопровождает (vue) музыку

внешний интерфейс Ресурсы изображений Vue.js CSS

предисловие

В последнее время я самообучаюсь Vue, и планирую имитировать проект, чтобы практиковать его самостоятельно. Так как я люблю слушать песни, я выбираю NetEase Cloud Music. Я поделюсь с вами проблемами, с которыми я столкнулся, и я надеюсь, что Есть некоторые недостатки Мы даем несколько ценных советов, учимся друг у друга и вместе добиваемся прогресса.

О стеке технологий, используемом проектом

  • Vue: использование синтаксиса Vue

  • Vuex: реализовать совместное использование состояния между различными компонентами

  • vue-router: необходим для управления маршрутизацией одностраничных приложений.

  • axios: инициировать http-запрос

  • SASS (SCSS): язык предварительной обработки CSS.

проект

Из-за ограниченного времени я только что сделал функцию воспроизведения страницы, которая использует API NetEase Cloud Music.Облако NetEase, те, кто заинтересован, могут пойти и поиграть, что также требует некоторых знаний, которыми я поделюсь с вами здесь.

Над

Весь эффект:

)

Поделитесь процессом создания этой отдельной страницы

Это одна страница, состоящая из компонента заголовка, компонента нижнего колонтитула, компонента musicList и компонента воспроизведения.

1. Как получить музыкальные данные

Я взял его из API NetEase Cloud Music. После того, как я его подобрал, я создал новый файл, поместил в него данные и получил их через axios. Некоторые из кодов следующие:

actions: {
    getData({ commit,state }) {
      if (localStorage.musics !== '[]' && localStorage.musics) {
        state.musicData = JSON.parse(localStorage.musics);
        return;
      }
      return new Promise((resolve, reject) => {
        Vue.axios.get('music-data')
            .then (res => {
              if (res.data.error === 0) {
                state.musicData = res.data.musicData;
                localStorage.musics = JSON.stringify(state.musicData);
              }
            })
            .then(() => {
              commit('toggleMusic',0)
            });
        resolve();
      });
    }
  }

2. Функция удаления

Здесь я связал событие под значком удаления, в основном всего две строки кода:

<span v-on:click="del(index)" class="del-icon"></span>
在methods定义del事件就好了
        del(index){
            this.$store.commit('del',index);
        }

3. Элементы управления воспроизведением хвоста

Функция воспроизведения в конце В начале я столкнулся с проблемой, как получить время песни и контролировать ход воспроизведения. Позже я решил эту проблему, поискав информацию и Baidu.

Часть кода для получения времени песни выглядит следующим образом:

 <span class="start">{{transformTime(now)}}</span>
 js部分代码
  this.nativeAudio = document.querySelector('audio');
    this.nativeAudio.addEventListener('play', () => {
      this.totalTime = this.transformTime(this.nativeAudio.duration);
      this.now = this.nativeAudio.currentTime;
      setInterval(() => {
        this.now = this.nativeAudio.currentTime;
      }, 1000)
    })
    
    transformTime(seconds) {
      let m, s;
      m = Math.floor(seconds / 60);
      m = m.toString().length == 1 ? ('0' + m) : m;
      s = Math.floor(seconds - 60 * m);
      s = s.toString().length == 1 ? ('0' + s) : s;
      return m + ':' + s;
    }

Часть кода для контроля прогресса воспроизведения выглядит следующим образом

changeTime(event) {
      let progressBar = this.$refs.progressBar;
      let coordStart = progressBar.getBoundingClientRect().left;  //getBoundingClientRect()方法返回元素的大小及其相对于视口的位置
      let coordEnd = event.pageX;
      this.nativeAudio.currentTime = (coordEnd - coordStart) / progressBar.offsetWidth * this.nativeAudio.duration;
      this.now = this.nativeAudio.currentTime;
      this.nativeAudio.play();
      this.$store.commit('play', true);
    },
touchMove(event) {
      let progressBar = this.$refs.progressBar;
      let coordStart = progressBar.getBoundingClientRect().left;
      let coordEnd = event.touches[0].pageX;
      this.$refs.now.style.width = ((coordEnd - coordStart) / progressBar.offsetWidth).toFixed(3) * 100 + '%';  //toFixed(3)保留小数点后3位
    },
touchEnd(event) {
      this.nativeAudio.currentTime = this.$refs.now.style.width.replace('%', '')/100 * this.nativeAudio.duration;
      this.now = this.nativeAudio.currentTime;
      this.nativeAudio.play();
      this.$store.commit('play', true);
    },

4. Скиннинг

Скиннинг в основном предоставляет четыре цвета, красный, синий, черный и зеленый, стиль использует гибкую компоновку, основной код CSS выглядит следующим образом:

.skin {
        position: absolute;
        display: flex;
        flex-direction: column;
        bottom: 50px;
        right: 15px;
        width: 30px;
        .skin-colors {
          flex: 4;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .selected {
            border: 1px solid white;
          }
          i {
            flex: 1;
            display: inline-block;
            width: 20px;
            height: 20px;
            cursor: pointer;
            border-radius: 10px;
            margin-bottom: 5px;
          }
          i.one {
            background-color: #B72712;
          }
          i.two {
            background-color: #1565C0;
          }
          i.three {
            background-color: #212121;
          }
          i.four {
            background-color: #1B5E20;
          }
        }
        .icon-skin {
          flex: 1;
          width: 100%;
          height: 30px;
          background-repeat: no-repeat;
          background-size: contain;
          margin-top: 3px;
          cursor: pointer;
        }
        .icon-skin-red {
          background-image: url('./skinRed.svg');
        }
        .icon-skin-green {
          background-image: url('./skinGreen.svg');
        }
        .icon-skin-blue {
          background-image: url('./skinBlue.svg');
        }
        .icon-skin-black {
          background-image: url('./skinBlack.svg');
        }

5. Управляйте воспроизведением предыдущей и следующей песни песни

Часть кода выглядит следующим образом:

    prev() {
      this.audio.index = this.audio.index === 0 ? this.musicData.length - 1 : (--this.audio.index);
      this.$store.commit('toggleMusic', this.audio.index);
    }
    
    next() {
      this.audio.index = this.audio.index === this.musicData.length - 1 ? 0 : (++this.audio.index);
      this.$store.commit('toggleMusic', this.audio.index);
    }

Резюме: Получите более четкое представление о предыдущем использовании каждого компонента и совместном использовании состояния различных компонентов, имитируя этот проект. Конечно, я тоже столкнулся с некоторыми ямами.Статья написана здесь, и она не полностью закончена.Я написал только одну страницу, но это тоже небольшое резюме.Далее прикрепляю свой исходный код:Исходный код проекта, Заинтересованные друзья могут взглянуть на то, как помочь указать звезду и вилку, и надеяться помочь некоторым друзьям. Как студент, который собирается стать старшим, время действительно драгоценно, и я не смею расслабляться в учебе.Если у вас есть хорошие идеи, вы можете связаться со мной по qq: 137032979. Кодировать слова непросто , надеюсь всем понравится. Впереди долгий путь, и я разделю его с вами.

Категории