質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

1053閲覧

曲の再生総時間をページが表示されたタイミングで表示したい

selfstudy

総合スコア12

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2020/05/08 04:18

編集2020/05/08 05:27

実現したいこと

曲の再生総時間をページが表示されたタイミングで表示したいです。
audioElementで曲の再生時間を取得し、曲名の横に再生時間を表示しようとしています。
・created部分に、onloadedmeradataの中にgenerateDurationを記述し、データを読み込ませた後にdurationを取得
・v-forで曲のlistを表示し、{{ item.du }}で再生総時間を表示(ここができない)
・chromeにあるvue拡張機能でデータが取れているか確認したところ、取れてはいる
・同じ列の{{ item.name }}(曲名)はホバーされなくてもページが読まれたときに表示される

該当コード

<template> <div>  <img :src="this.jacket" class="music__jacket" alt /> <ul> <li v-for="(item, index) in filteredIndex" :key="(item.name, item.du, index)" class="music__item" :class="{ active: isActive[index] }" @click="Play(index)" @mouseenter="showBgImage(index)" > <div class="songname"> {{ item.name }} </div> <div> {{ item.du }} </div> </li> </ul> </div> </temlate> <script> export default { props: { tracks: { type: Array, default: () => [] } }, data() { return { initialIndex: 0, audio: null, width: {}, barWidth: {}, currentSecTime: {}, currentTime: {}, selectedItem: '', isActive: [false, false, false, false, false], duration: 0, bgimg: {}, jacket: 'test.jpg', filteredIndex: [] } }, created() { if (process.client) { this.audio = new Audio() this.audio.onloadedmetadata = () => { this.generateTime() } this.filteredIndex = this.tracks.filter((value) => { return value.name !== null }) for (let index = 0; index < this.filteredIndex.length; index++) { this.audio[index] = new Audio() this.audio[index].preload = 'metadata' this.audio[index].onloadedmetadata = () => { this.generateDuration(index) this.audio[index] = null } this.audio[index].src = this.filteredIndex[index].source } } }, generateDuration(i) { let durmin = Math.floor(this.audio[i].duration / 60) let dursec = Math.floor(this.audio[i].duration - durmin * 60) if (durmin < 10) { durmin = '0' + durmin } if (dursec < 10) { dursec = '0' + dursec } this.filteredIndex[i].du = durmin + ':' + dursec // return this.filteredIndex[i].du console.log(this.filteredIndex[i].du) },   showBgImage(index) { this.jacket = this.tracks[index].jacket }  } } </script>

#環境

  • npm 6.13.4
  • node 12.16.1
  • Nuxt.js
  • chorome
  • Mac
  • Wordpressと連携

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

この部分を

main.vue

1<script> 2this.filteredIndex[i].du = durmin + ':' + dursec 3</script>

以下のように書き換えることで解決

main.vue

1<script> 2this.$set(this.filteredIndex[i], 'du', durmin + ':' + dursec) 3</script>

オブジェクトの中身を変更する際、Vueの書き方にしないといけないらしい
参考Qiita

投稿2020/05/11 23:17

selfstudy

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問