soundFormats / サウンドフォーマット

特許の問題により、すべてのウェブブラウザでサポートされている単一のサウンドフォーマットはありません。完全な互換性を確保するために、'sound.mp3' や 'sound.ogg' など、複数のフォーマットで同じサウンドファイルを含めることができます。soundFormats() メソッドは、スケッチに含まれているフォーマットを loadSound に伝えます。その後、loadSound は、クライアントのウェブブラウザでサポートされている最初のフォーマットをロードしようとします。

soundFormats mp3 ogg
Sound Compatibility

View Source Code

/**
 *  @name soundFormats
 *  @arialabel On page load, a green screen plays music. When the user clicks on it, the screen turns red and stops playing music
 *  @description <p>Technically, due to patent issues, there is no single
 *  sound format that is supported by all web browsers. While
 *  <a href="http://caniuse.com/#feat=mp3">mp3 is supported</a> across the
 *  latest versions of major browsers on OS X and Windows, for example,
 *  it may not be available on some less mainstream operating systems and
 *  browsers.</p>
 *
 *  <p>To ensure full compatibility, you can include the same sound file
 *  in multiple formats, e.g. 'sound.mp3' and 'sound.ogg'. (Ogg is an
 *  open source alternative to mp3.) You can convert audio files
 *  into web friendly formats for free online at <a href="
 *  http://media.io/">media.io</a></p>.
 *
 *  <p>The soundFormats() method tells loadSound which formats
 *  we have included with our sketch. Then, loadSound will
 *  attempt to load the first format that is supported by the
 *  client's web browser.</p>
 *
 * <p><em><span class="small"> To run this example locally, you will need the
 * <a href="http://p5js.org/reference/#/libraries/p5.sound">p5.sound library</a>
 * a sound file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.</span></em></p>
 */
let song;

function preload() {
  // we have included both an .ogg file and an .mp3 file
  soundFormats('ogg', 'mp3');

  // if mp3 is not supported by this browser,
  // loadSound will load the ogg file
  // we have included with our sketch
  // song = loadSound('assets/lucky_dragons_-_power_melody.mp3');
  song = loadSound('../../../../p5js-website-legacy-examples/assets/lucky_dragons_-_power_melody.mp3');
}

function setup() {
  // createCanvas(710, 200);
  createCanvas(windowWidth, windowHeight);

  // song loaded during preload(), ready to play in setup()
  song.play();
  background(0, 255, 0);
}

function mousePressed() {
  if (song.isPlaying()) {
    // .isPlaying() returns a boolean
    song.pause();
    background(255, 0, 0);
  } else {
    song.play(); // playback will resume from the pause position
    background(0, 255, 0);
  }
}

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.