Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[p5.js 2.0+ Bug Report]: Incorrect isDone assignment in MediaElement.onended() example

オープン 初心者向け
  • 何か問題がありますか？
#9,339 コメント 2 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 3 日以内に返信

@BhumitSahani がすでに取り組んでいます。

2026年10月27日 から。

  • #9346 @BhumitSahani による — オープン

評価

難易度
1/5
見積もり時間
1時間未満
初心者へのやさしさ
86/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript
領域
documentation

調査の方向性

issue でリンクされている p5.MediaElement onended() のリファレンス例を開き、スニペットに示されている handleEnd() のコードを見つけてください。draw() で「Done!」を表示する条件と照らし合わせて、代入を確認してください。再生終了後に完了メッセージが表示されるよう例を修正し、例を実行して、音声の再生が終わったときに「Done!」が表示されることを確認してください。

索引モデルが issue の本文から書いたものです。

説明

Area:DOM p5.js 2.0+
Most appropriate sub-area of p5.js?
  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • WebGPU
  • p5.strands
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)
p5.js version

2.3.2

Web browser and version

Microsoft Edge 156.0.4314.42 (Official build) (64-bit)

Operating system

Windows 11 Version 26H2 (Build 26300.9711)

Steps to reproduce this
Steps:
  1. Open the onended() reference example: https://p5js.org/es/reference/p5.MediaElement/onended/
  2. Run the example and click the canvas to start audio playback.
  3. Wait for the audio to finish. The example is intended to display "Done!", but handleEnd() assigns isDone = false, while draw() displays "Done!" only when isDone === true.
Snippet:
Image 

let beat;
let isPlaying = false;
let isDone = false;

function setup() {
  createCanvas(100, 100);

  // Create a p5.MediaElement using createAudio().
  beat = createAudio('/assets/beat.mp3');

  // Call handleEnd() when the beat finishes.
  beat.onended(handleEnd);

  describe('The text "Click to play" written in black on a gray square. A beat plays when the user clicks. The text "Done!" appears when the beat finishes playing.');
}

function draw() {
  background(200);

  // Style the text.
  textAlign(CENTER);
  textSize(16);

  // Display different messages based on playback.
  if (isDone === true) {
    text('Done!', 50, 50);
  } else if (isPlaying === false) {
    text('Click to play', 50, 50);
  } else {
    text('Playing...', 50, 50);
  }
}

// Play the beat when the user presses the mouse.
function mousePressed() {
  if (isPlaying === false) {
    isPlaying = true;
    beat.play();
  }
}

// Set isDone when playback ends.
function handleEnd() {
  isDone = false;
}
主要言語
JavaScript
スター
24.3k
フォーク
3.9k
平均マージ
4日 4時間
マージ済み PR（30日）
43

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

processing/p5.js のほかの issue

processing/p5.js の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。