p5.js MediaElement volume()用法及代码示例

p5.js中p5.MediaElement的volume()方法用于设置或返回媒体元素的当前音量。可以使用介于0.0和1.0之间的值来指定体积，其中0.0表示介质中没有体积，而值1.0表示最大体积。任何中间值均可用于指定所需的体积。

可以通过不向该函数传递任何参数来返回当前的介质体积。

用法:

volume( val )

参数：此方法接受如上所述和以下描述的单个参数：

val:该数字指定要设置的音量。体积可以在0.0到1.0之间。它是一个可选参数。

返回值：此方法返回一个Number，表示媒体元素的当前体积。

以下示例说明了p5.js中的volume()方法：

范例1：

Javascript

let currVolume = 0.5; 
  
function setup() { 
    createCanvas(500, 400); 
    textSize(18); 
  
    text("Click on the buttons to increase " + 
         "or decrease the volume", 20, 20); 
  
    example_media = 
      createVideo("sample-video.mp4"); 
    example_media.size(500, 300); 
    example_media.position(20, 100); 
    example_media.showControls(); 
  
    example_media.volume(currVolume); 
  
    incBtn = createButton("Increase Volume"); 
    incBtn.position(30, 40); 
    incBtn.mousePressed(incVol); 
  
    decBtn = createButton("Decrease Volume"); 
    decBtn.position(160, 40); 
    decBtn.mousePressed(decVol); 
  
    text("The video is playing at " + 
         "half volume", 20, 80); 
} 
  
function incVol() { 
  clear(); 
  
  if (currVolume < 0.9) 
    currVolume += 0.1; 
  
  // Set the new higher volume 
  example_media.volume(currVolume); 
  
  text("The volume has been increased", 
       20, 80); 
  
  text("Click on the buttons to increase " +  
       "or decrease the volume", 20, 20); 
} 
  
function decVol() { 
  clear(); 
  
  if (currVolume > 0.1) 
    currVolume -= 0.1; 
  
  // Set the new lower volume 
  example_media.volume(currVolume); 
  
  text("The volume has been decreased", 
       20, 80); 
  
  text("Click on the buttons to increase " + 
       "or decrease the volume", 20, 20); 
}

输出：

范例2：

Javascript

function setup() { 
  createCanvas(500, 400); 
  textSize(20); 
  
  text("Move the slider to increase or " + 
       "decrease the volume", 20, 20); 
  
  example_media = 
    createVideo("sample-video.mp4"); 
  example_media.size(500, 300); 
  example_media.position(20, 80); 
  
  example_media.showControls(); 
  
  volSlider = 
    createSlider(0.0, 1.0, 0.5, 0.1); 
  volSlider.position(20, 40); 
  volSlider.input(changeVol); 
} 
  
function changeVol() { 
  clear(); 
  
  let volumeVal = volSlider.value(); 
  
  // Set the media volume to the slider value 
  example_media.volume(volumeVal); 
  
  // Get the current volume 
  let currVolume = example_media.volume(); 
  
  text("Move the slider to increase or " + 
       "decrease the volume", 20, 20); 
  text("Video is playing at volume:" + 
       currVolume, 20, 80); 
}

输出：

在线编辑： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5.MediaElement/volume

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.MediaElement volume() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。