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

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

新規登録して質問してみよう
ただいま回答率
85.37%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1015閲覧

Electronで音声を鳴らしたい

mocchirin

総合スコア2

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/08/26 04:55

編集2021/08/26 05:40

ElectronでWebアプリを開発していて、音声を鳴らすときに0Bしか読み込まれません。
イメージ説明
このボタンを押すと再生が始まるように作ったのですが、押すと
イメージ説明
のようになぜか0Bのファイルが読み込まれます。
どうしたら再生されますか?

javascript

1$(function () { 2 var playerTrack = $("#player-track"), 3 bgArtwork = $('#bg-artwork'), 4 bgArtworkUrl, albumName = $('#album-name'), 5 trackName = $('#track-name'), 6 albumArt = $('#album-art'), 7 sArea = $('#s-area'), 8 seekBar = $('#seek-bar'), 9 trackTime = $('#track-time'), 10 insTime = $('#ins-time'), 11 sHover = $('#s-hover'), 12 playPauseButton = $("#play-pause-button"), 13 i = playPauseButton.find('i'), 14 tProgress = $('#current-time'), 15 tTime = $('#track-length'), 16 seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, 17 buffInterval = null, 18 tFlag = false, 19 albums = ['Holder', 'SiIvaGunner'], 20 trackNames = ['MINECRAFT THEME (TRAP REMIX)'], 21 albumArtworks = ['_1', '_2'], 22 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; 23 24 function playPause() { 25 setTimeout(function () { 26 if (audio.paused) { 27 playerTrack.addClass('active'); 28 albumArt.addClass('active'); 29 checkBuffering(); 30 i.attr('class', 'fas fa-pause'); 31 audio.play(); 32 } 33 else { 34 playerTrack.removeClass('active'); 35 albumArt.removeClass('active'); 36 clearInterval(buffInterval); 37 albumArt.removeClass('buffering'); 38 i.attr('class', 'fas fa-play'); 39 audio.pause(); 40 } 41 }, 300); 42 } 43 44 45 function showHover(event) { 46 seekBarPos = sArea.offset(); 47 seekT = event.clientX - seekBarPos.left; 48 seekLoc = audio.duration * (seekT / sArea.outerWidth()); 49 50 sHover.width(seekT); 51 52 cM = seekLoc / 60; 53 54 ctMinutes = Math.floor(cM); 55 ctSeconds = Math.floor(seekLoc - ctMinutes * 60); 56 57 if ((ctMinutes < 0) || (ctSeconds < 0)) 58 return; 59 60 if ((ctMinutes < 0) || (ctSeconds < 0)) 61 return; 62 63 if (ctMinutes < 10) 64 ctMinutes = '0' + ctMinutes; 65 if (ctSeconds < 10) 66 ctSeconds = '0' + ctSeconds; 67 68 if (isNaN(ctMinutes) || isNaN(ctSeconds)) 69 insTime.text('--:--'); 70 else 71 insTime.text(ctMinutes + ':' + ctSeconds); 72 73 insTime.css({ 'left': seekT, 'margin-left': '-21px' }).fadeIn(0); 74 75 } 76 77 function hideHover() { 78 sHover.width(0); 79 insTime.text('00:00').css({ 'left': '0px', 'margin-left': '0px' }).fadeOut(0); 80 } 81 82 function playFromClickedPos() { 83 audio.currentTime = seekLoc; 84 seekBar.width(seekT); 85 hideHover(); 86 } 87 88 function updateCurrTime() { 89 nTime = new Date(); 90 nTime = nTime.getTime(); 91 92 if (!tFlag) { 93 tFlag = true; 94 trackTime.addClass('active'); 95 } 96 97 curMinutes = Math.floor(audio.currentTime / 60); 98 curSeconds = Math.floor(audio.currentTime - curMinutes * 60); 99 100 durMinutes = Math.floor(audio.duration / 60); 101 durSeconds = Math.floor(audio.duration - durMinutes * 60); 102 103 playProgress = (audio.currentTime / audio.duration) * 100; 104 105 if (curMinutes < 10) 106 curMinutes = '0' + curMinutes; 107 if (curSeconds < 10) 108 curSeconds = '0' + curSeconds; 109 110 if (durMinutes < 10) 111 durMinutes = '0' + durMinutes; 112 if (durSeconds < 10) 113 durSeconds = '0' + durSeconds; 114 115 if (isNaN(curMinutes) || isNaN(curSeconds)) 116 tProgress.text('00:00'); 117 else 118 tProgress.text(curMinutes + ':' + curSeconds); 119 120 if (isNaN(durMinutes) || isNaN(durSeconds)) 121 tTime.text('00:00'); 122 else 123 tTime.text(durMinutes + ':' + durSeconds); 124 125 if (isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds)) 126 trackTime.removeClass('active'); 127 else 128 trackTime.addClass('active'); 129 130 131 seekBar.width(playProgress + '%'); 132 133 if (playProgress == 100) { 134 i.attr('class', 'fa fa-play'); 135 seekBar.width(0); 136 tProgress.text('00:00'); 137 albumArt.removeClass('buffering').removeClass('active'); 138 clearInterval(buffInterval); 139 } 140 } 141 142 function checkBuffering() { 143 clearInterval(buffInterval); 144 buffInterval = setInterval(function () { 145 if ((nTime == 0) || (bTime - nTime) > 1000) 146 albumArt.addClass('buffering'); 147 else 148 albumArt.removeClass('buffering'); 149 150 bTime = new Date(); 151 bTime = bTime.getTime(); 152 153 }, 100); 154 } 155 156 function selectTrack(flag) { 157 if (flag == 0 || flag == 1) 158 ++currIndex; 159 else 160 --currIndex; 161 162 if ((currIndex > -1) && (currIndex < albumArtworks.length)) { 163 if (flag == 0) 164 i.attr('class', 'fa fa-play'); 165 else { 166 albumArt.removeClass('buffering'); 167 i.attr('class', 'fa fa-pause'); 168 } 169 170 seekBar.width(0); 171 trackTime.removeClass('active'); 172 tProgress.text('00:00'); 173 tTime.text('00:00'); 174 175 currAlbum = albums[currIndex]; 176 currTrackName = trackNames[currIndex]; 177 currArtwork = albumArtworks[currIndex]; 178 179 audio.src = trackUrl[currIndex]; 180 181 nTime = 0; 182 bTime = new Date(); 183 bTime = bTime.getTime(); 184 185 if (flag != 0) { 186 audio.play(); 187 playerTrack.addClass('active'); 188 albumArt.addClass('active'); 189 190 clearInterval(buffInterval); 191 checkBuffering(); 192 } 193 194 albumName.text(currAlbum); 195 trackName.text(currTrackName); 196 albumArt.find('img.active').removeClass('active'); 197 $('#' + currArtwork).addClass('active'); 198 199 bgArtworkUrl = $('#' + currArtwork).attr('src'); 200 201 bgArtwork.css({ 'background-image': 'url(' + bgArtworkUrl + ')' }); 202 } 203 else { 204 if (flag == 0 || flag == 1) 205 --currIndex; 206 else 207 ++currIndex; 208 } 209 } 210 211 function initPlayer() { 212 audio = new Audio(); 213 214 selectTrack(0); 215 216 audio.loop = false; 217 218 playPauseButton.on('click', playPause); 219 220 sArea.mousemove(function (event) { showHover(event); }); 221 222 sArea.mouseout(hideHover); 223 224 sArea.on('click', playFromClickedPos); 225 226 $(audio).on('timeupdate', updateCurrTime); 227 228 playPreviousTrackButton.on('click', function () { selectTrack(-1); }); 229 playNextTrackButton.on('click', function () { selectTrack(1); }); 230 } 231 232 initPlayer(); 233});

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

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

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

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

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

y_waiwai

2021/08/26 05:27

まずは提示のコードがどういう動作をするのか説明しましょう
mocchirin

2021/08/26 05:42

訂正しました。 すみません。
guest

回答1

0

自己解決

GitHub-Webpageを使って読み込むようにしたら再生されました。

投稿2021/08/26 10:45

mocchirin

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問