html如何播放wav文件?

html如何播放wav文件?,第1张

ie下的方法一:

<object classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' 调用media player

ie下的方法二:

<bgsound  loop="false"   autostart="false"  id="bgss" src="XXX">

html5 的audio

<audio src="../temp.wav" controls="controls">wav</audio>

用HTML5的audio标签,就要考虑浏览器对音频格式的支持情况,见下图:

可见,chrome下面是不支持WAV格式的音频。

如果要兼容所有现代浏览器,建议以如下方式同时引入mp3和ogg格式:

<audio preload="auto">

 <source src="test.mp3" />

 <source src="test.ogg" />

</audio>

据个人了解

网页中的音乐播放代码有以下几种:

第一种:页面代码中的<head></head>之间加入<bgsound src="音乐url" loop="-1">这段代码。 loop指音乐循环的次数,可设置为任意正整数,若设为“-1”的话,音乐将永远循环。

第二种:

在网页代码中的<style></style>标签之间加入一个“Embed”标签,其最简形式就像这样:

<embed src="音乐url" autostart="true" loop="true" width="80" height="20">

不同的是,在这里我们可以设置更多内容,相信内容请看w3scholl手册!

第三种:

使用超链接

例如:<a href="horse.mp3">Play the sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

第四种:

使用 HTML5 <audio>元素

<audio>元素是一个 HTML5 元素,在 HTML 4 中是非法的,但在所有浏览器中都有效。

例子:

<audio controls>

<source src="horse.mp3" type="audio/mpeg">

<source src="horse.ogg" type="audio/ogg">

Your browser does not support this audio format.

</audio>

使用javafx的Media,MediaPlayer,MediaView。代码如下:

import java.io.Fileimport javafx.application.Applicationimport javafx.beans.binding.Bindingsimport javafx.beans.property.ReadOnlyPropertyimport javafx.beans.value.ObservableValueimport javafx.event.ActionEventimport javafx.geometry.Posimport javafx.scene.Sceneimport javafx.scene.control.Buttonimport javafx.scene.control.Menuimport javafx.scene.control.MenuBarimport javafx.scene.control.MenuItemimport javafx.scene.control.Sliderimport javafx.scene.image.Imageimport javafx.scene.image.ImageViewimport javafx.scene.layout.BorderPaneimport javafx.scene.layout.HBoximport javafx.scene.layout.Paneimport javafx.scene.layout.VBoximport javafx.scene.media.Mediaimport javafx.scene.media.MediaPlayerimport javafx.scene.media.MediaPlayer.Statusimport javafx.scene.media.MediaViewimport javafx.stage.FileChooserimport javafx.stage.FileChooser.ExtensionFilterimport javafx.stage.Stageimport javafx.util.Durationpublic class App extends Application { private MediaView mediaView private Slider processSlider private static final Object AUTO = new Object(), MANUAL = new Object() public static void main(String[] args) { launch(args) } @Override public void start(Stage primaryStage) throws Exception { primaryStage.setTitle("javafx视频播放器")BorderPane root = new BorderPane()// 菜单栏 initMenu(root)// 视频播放控件 mediaView = initMediaView(root)// 视频功能控件 initMediaControllView(root)primaryStage.setScene(new Scene(root, 600, 400))primaryStage.setOnCloseRequest(event ->System.exit(0))primaryStage.show() } private MenuBar initMenu(final BorderPane parent) { Menu menu = new Menu("菜单")MenuItem item = new MenuItem("打开")item.setOnAction(event ->{ FileChooser chooser = new FileChooser()chooser.setTitle("选择视频文件")chooser.getExtensionFilters().add(new ExtensionFilter("视频文件", "*.mp4", "*.flv"))File file = chooser.showOpenDialog(parent.getScene().getWindow())if (file != null) { MediaPlayer player = mediaView.getMediaPlayer()// 关闭当前的player if (player != null) { player.stop()player.dispose()} processSlider.setValue(0)// 创建一个新的player并自动播放 player = new MediaPlayer(new Media(file.toURI().toString()))player.currentTimeProperty().addListener(this::mediaProcessChanged)player.setAutoPlay(true)mediaView.setMediaPlayer(player)} })menu.getItems().add(item)item = new MenuItem("退出")item.setOnAction(event ->parent.getScene().getWindow().hide())menu.getItems().add(item)MenuBar menuBar = new MenuBar(menu)parent.setTop(menuBar)return menuBar} private MediaView initMediaView(final BorderPane parent) { MediaView view = new MediaView()Pane pane = new Pane(view)parent.setCenter(pane)// 视频宽高可随着窗口变化而自动缩放 view.fitWidthProperty().bind(Bindings.selectDouble(view.parentProperty(), "width"))view.fitHeightProperty().bind(Bindings.selectDouble(view.parentProperty(), "height"))view.setPreserveRatio(true)return view } private void initMediaControllView(final BorderPane parent) { VBox bottom = new VBox(10) bottom.setAlignment(Pos.CENTER) parent.setBottom(bottom) Slider slider = new Slider(0, 100, 0) slider.valueProperty().addListener(this::processSliderChanged)// slider.setOnMouseClicked(this::processSliderClicked) bottom.getChildren().add(slider) processSlider = slider HBox hbox = new HBox(10) bottom.getChildren().add(hbox) hbox.setAlignment(Pos.CENTER)Button btn = new Button(null, new ImageView(loadImage("pause.png"))) btn.setOnAction(this::pauseOrPlay) hbox.getChildren().add(btn) btn = new Button(null, new ImageView(loadImage("stop.png"))) btn.setOnAction(this::stopPlay) hbox.getChildren().add(btn) } private static Image loadImage(String resPath) { return new Image(Thread.currentThread().getContextClassLoader().getResourceAsStream(resPath)) } private void pauseOrPlay(ActionEvent event) { MediaPlayer player = mediaView.getMediaPlayer() if (player == null) { return } Status status = player.getStatus() if (status == Status.READY || status == Status.PAUSED) { player.play() ((Button) event.getTarget()).setGraphic(new ImageView(loadImage("pause.png"))) } else if (status == Status.PLAYING) { player.pause() ((Button) event.getTarget()).setGraphic(new ImageView(loadImage("play.png"))) } } private void stopPlay(ActionEvent event) { MediaPlayer player = mediaView.getMediaPlayer() if (player == null) { return } player.stop() } // private void processSliderClicked(MouseEvent event) {// Slider slider = (Slider) event.getSource()// if (mediaView.getMediaPlayer() != null) {// Duration d = mediaView.getMediaPlayer().getTotalDuration().multiply(slider.getValue() / slider.getMax())// mediaView.getMediaPlayer().seek(d)// }// } private void processSliderChanged(ObservableValue<? extends Number>observable, Number oldValue, Number newValue) { Slider slider = (Slider) ((ReadOnlyProperty<? extends Number>) observable).getBean() if (slider.getUserData() == AUTO) { // 进度条是自动改变的,因此不用设置播放器 slider.setUserData(null) return } if (mediaView.getMediaPlayer() != null) { slider.setUserData(MANUAL) Duration d = mediaView.getMediaPlayer().getTotalDuration().multiply(newValue.doubleValue() / slider.getMax()) mediaView.getMediaPlayer().seek(d) } } private void mediaProcessChanged(ObservableValue<? extends Duration>observable, Duration oldValue, Duration newValue) { if (processSlider.getUserData() == MANUAL) { // 手动点击进度条 processSlider.setUserData(null) return } MediaPlayer player = (MediaPlayer) ((ReadOnlyProperty<? extends Duration>) observable).getBean() processSlider.setUserData(AUTO) processSlider.setValue(newValue.toMillis() / player.getTotalDuration().toMillis() * 100) } }


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6211327.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存