編集履歴

質問編集履歴

訂正しました

2021/08/26 05:40

投稿

mocchirin

スコア2

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,10 +1,14 @@
 ElectronでWebアプリを開発していて、音声を鳴らすときに0Bしか読み込まれません。
+![イメージ説明](d943d031c3cb384a6738c2d65318f74b.png)
-どうしたら良いでしょうか。
+このボタンを押すと再生が始まるように作ったのですが、押すと
 ![イメージ説明](67fc7a7a0425e4603a7c0e5a9b3fe944.png)
-![イメージ説明](998c73b1e7931801d58d74ed95e7002c.png)
+のようになぜか0Bのファイルが読み込まれます。
+どうしたら再生されますか？
 ```javascript

コード追加

2021/08/26 05:39

投稿

mocchirin

スコア2

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -5,3 +5,473 @@
 ![イメージ説明](67fc7a7a0425e4603a7c0e5a9b3fe944.png)
 ![イメージ説明](998c73b1e7931801d58d74ed95e7002c.png)
+```javascript
+$(function () {
+    var playerTrack = $("#player-track"),
+      bgArtwork = $('#bg-artwork'),
+      bgArtworkUrl, albumName = $('#album-name'),
+      trackName = $('#track-name'),
+      albumArt = $('#album-art'),
+      sArea = $('#s-area'),
+      seekBar = $('#seek-bar'),
+      trackTime = $('#track-time'),
+      insTime = $('#ins-time'),
+      sHover = $('#s-hover'),
+      playPauseButton = $("#play-pause-button"),
+      i = playPauseButton.find('i'),
+      tProgress = $('#current-time'),
+      tTime = $('#track-length'),
+      seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0,
+      buffInterval = null,
+      tFlag = false,
+      albums = ['Holder', 'SiIvaGunner'],
+      trackNames = ['MINECRAFT THEME (TRAP REMIX)'],
+      albumArtworks = ['_1', '_2'],
+      trackUrl = [path.join(__dirname, 'assets', 'sounds', 'MINECRAFT THEME (TRAP REMIX) - Holder.webm'), path.join(__dirname, 'assets', 'sounds', 'Gourmet Race (64) (1.0.0) - Super Smash Bros. UItimate.webm')], playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1;
+    function playPause() {
+        setTimeout(function () {
+            if (audio.paused) {
+                playerTrack.addClass('active');
+                albumArt.addClass('active');
+                checkBuffering();
+                i.attr('class', 'fas fa-pause');
+                audio.play();
+            }
+            else {
+                playerTrack.removeClass('active');
+                albumArt.removeClass('active');
+                clearInterval(buffInterval);
+                albumArt.removeClass('buffering');
+                i.attr('class', 'fas fa-play');
+                audio.pause();
+            }
+        }, 300);
+    }
+    function showHover(event) {
+        seekBarPos = sArea.offset();
+        seekT = event.clientX - seekBarPos.left;
+        seekLoc = audio.duration * (seekT / sArea.outerWidth());
+        sHover.width(seekT);
+        cM = seekLoc / 60;
+        ctMinutes = Math.floor(cM);
+        ctSeconds = Math.floor(seekLoc - ctMinutes * 60);
+        if ((ctMinutes < 0) || (ctSeconds < 0))
+            return;
+        if ((ctMinutes < 0) || (ctSeconds < 0))
+            return;
+        if (ctMinutes < 10)
+            ctMinutes = '0' + ctMinutes;
+        if (ctSeconds < 10)
+            ctSeconds = '0' + ctSeconds;
+        if (isNaN(ctMinutes) || isNaN(ctSeconds))
+            insTime.text('--:--');
+        else
+            insTime.text(ctMinutes + ':' + ctSeconds);
+        insTime.css({ 'left': seekT, 'margin-left': '-21px' }).fadeIn(0);
+    }
+    function hideHover() {
+        sHover.width(0);
+        insTime.text('00:00').css({ 'left': '0px', 'margin-left': '0px' }).fadeOut(0);
+    }
+    function playFromClickedPos() {
+        audio.currentTime = seekLoc;
+        seekBar.width(seekT);
+        hideHover();
+    }
+    function updateCurrTime() {
+        nTime = new Date();
+        nTime = nTime.getTime();
+        if (!tFlag) {
+            tFlag = true;
+            trackTime.addClass('active');
+        }
+        curMinutes = Math.floor(audio.currentTime / 60);
+        curSeconds = Math.floor(audio.currentTime - curMinutes * 60);
+        durMinutes = Math.floor(audio.duration / 60);
+        durSeconds = Math.floor(audio.duration - durMinutes * 60);
+        playProgress = (audio.currentTime / audio.duration) * 100;
+        if (curMinutes < 10)
+            curMinutes = '0' + curMinutes;
+        if (curSeconds < 10)
+            curSeconds = '0' + curSeconds;
+        if (durMinutes < 10)
+            durMinutes = '0' + durMinutes;
+        if (durSeconds < 10)
+            durSeconds = '0' + durSeconds;
+        if (isNaN(curMinutes) || isNaN(curSeconds))
+            tProgress.text('00:00');
+        else
+            tProgress.text(curMinutes + ':' + curSeconds);
+        if (isNaN(durMinutes) || isNaN(durSeconds))
+            tTime.text('00:00');
+        else
+            tTime.text(durMinutes + ':' + durSeconds);
+        if (isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds))
+            trackTime.removeClass('active');
+        else
+            trackTime.addClass('active');
+        seekBar.width(playProgress + '%');
+        if (playProgress == 100) {
+            i.attr('class', 'fa fa-play');
+            seekBar.width(0);
+            tProgress.text('00:00');
+            albumArt.removeClass('buffering').removeClass('active');
+            clearInterval(buffInterval);
+        }
+    }
+    function checkBuffering() {
+        clearInterval(buffInterval);
+        buffInterval = setInterval(function () {
+            if ((nTime == 0) || (bTime - nTime) > 1000)
+                albumArt.addClass('buffering');
+            else
+                albumArt.removeClass('buffering');
+            bTime = new Date();
+            bTime = bTime.getTime();
+        }, 100);
+    }
+    function selectTrack(flag) {
+        if (flag == 0 || flag == 1)
+            ++currIndex;
+        else
+            --currIndex;
+        if ((currIndex > -1) && (currIndex < albumArtworks.length)) {
+            if (flag == 0)
+                i.attr('class', 'fa fa-play');
+            else {
+                albumArt.removeClass('buffering');
+                i.attr('class', 'fa fa-pause');
+            }
+            seekBar.width(0);
+            trackTime.removeClass('active');
+            tProgress.text('00:00');
+            tTime.text('00:00');
+            currAlbum = albums[currIndex];
+            currTrackName = trackNames[currIndex];
+            currArtwork = albumArtworks[currIndex];
+            audio.src = trackUrl[currIndex];
+            nTime = 0;
+            bTime = new Date();
+            bTime = bTime.getTime();
+            if (flag != 0) {
+                audio.play();
+                playerTrack.addClass('active');
+                albumArt.addClass('active');
+                clearInterval(buffInterval);
+                checkBuffering();
+            }
+            albumName.text(currAlbum);
+            trackName.text(currTrackName);
+            albumArt.find('img.active').removeClass('active');
+            $('#' + currArtwork).addClass('active');
+            bgArtworkUrl = $('#' + currArtwork).attr('src');
+            bgArtwork.css({ 'background-image': 'url(' + bgArtworkUrl + ')' });
+        }
+        else {
+            if (flag == 0 || flag == 1)
+                --currIndex;
+            else
+                ++currIndex;
+        }
+    }
+    function initPlayer() {
+        audio = new Audio();
+        selectTrack(0);
+        audio.loop = false;
+        playPauseButton.on('click', playPause);
+        sArea.mousemove(function (event) { showHover(event); });
+        sArea.mouseout(hideHover);
+        sArea.on('click', playFromClickedPos);
+        $(audio).on('timeupdate', updateCurrTime);
+        playPreviousTrackButton.on('click', function () { selectTrack(-1); });
+        playNextTrackButton.on('click', function () { selectTrack(1); });
+    }
+    initPlayer();
+});
+```