Я пытаюсь воспроизвести аудиофайлы, хранящиеся на локальном устройстве, с использованием аудиообъекта. Я использую React для этого, потому что это просто и весело
Эта функция устанавливает sr c на путь воспроизведения музыки c.
this.LocalPlayer
в основном аудио объект инициализирован с использованием this.LocalPlayer = new Audio()
Например, путь /Users/apple/Downloads/Milky Chance/[2017] Blossom/01 - Milky Chance - Blossom.mp3
изменяется при попытке воспроизведения дорожки на что-то вроде http://localhost:8080/Users/apple/Downloads/Milky%20Chance/[2017]%20Blossom/01%20-%20Milky%20Chance%20-%20Blossom.mp3
.
Я не уверен если это webpack-dev-server, который добавляет localhost:8080
к свойству sr c. Любые мысли о том, что может быть не так с этим?
Спасибо
playLocalMusic = () => {
const {path} = this.props.playingNow
this.LocalPlayer.src = path
this.LocalPlayer.preload = "metadata"
this.LocalPlayer.onloadedmetadata = () => {
const trackOptions = {...this.state.trackOptions}
trackOptions.playing = true
trackOptions.duration = this.LocalPlayer.duration
this.setState({trackOptions})
this.LocalPlayer.play()
}
this.LocalPlayer.ontimeupdate = () => {
const trackOptions = {...this.state.trackOptions}
trackOptions.currentTime = this.LocalPlayer.currentTime
this.setState({trackOptions})
}
}
webpack.config. js:
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const CSSPlugin = new MiniCSSExtractPlugin({
filename: 'style.[contenthash].css'
})
const HTMLPlugin = new HTMLWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
})
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/build'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /.js(x)?$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /.s*[ac]ss$/,
use: ['style-loader', MiniCSSExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /.(ttf|otf|flac|mp3)/,
use: 'file-loader'
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
}
]
},
plugins: [CSSPlugin, HTMLPlugin],
}